Position property in CSS

Position property in CSS is used to place any item in the entire whole webpage at any place we place, Ir-respective of its actual assigned position in the DOM.

By actual assigned position, what I mean is - If I make one div under one parent div their default behavior will be to stay inside the parent div no matter what.

So lets an example of the same

here you can see that there is a div inside another div and its default position is inside the parent.

How to make this div move. without changing the DOM.

To achieve this we use something called Position property.

Sides

We use Top/ Bottom/ Left/ Right to move the element from its place

.class {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

But here is the thing, we have many types of position values to choose from.

Let's see the types of values that position has

Types of position.

Lets first list the type of value we are going to discuss here

Static
Relative
Absolute
Fixed
Stickys

Static

Every element's default value is already set to static. That means we have already seen how static works. Things to keep in mind is:-

If you set any Top/Bottom/Right/left it will not work simply.

Relative

The element you give this value will not suddenly move a lot, because what it does is, it makes the element free from the parent element but keep the initial position on the page intact. The element is free to be moved now, but the position it will be relative to will be the initial position that it had when it was intact with the parent element.

in the example below you'll see that the position of the child div is moved without having to change the HTML.
The place of reference is the place it used to be.
Top/ Right/ Bottom/ Left property will affect the position of this child element.

Absolute

This value changes a lot when it's applied to any element. And a lot of things happen here, let me explain.

when you apply position: absolute; to any element its initial position is lost, i.e. it becomes relative to the body(in most cases), now the other element in the direct parent element will act as if this element doesn't exist and will take up its space.
The element will initially be at its place but without having any relativity of the original place. -try commenting out the top and right value in the example below to see what I mean.
The property such as Top/ Bottom/ Right/ Left will move the element from the margins of the body, not the parent element or the original place of itself.
Here comes the interesting part, if you want to move the element with respect to its parent element then you can put position: relative; in the parent element. Like in the previous case the element was moving relative to the body without specifying anything, here you are explicitly specifying that be relative to this particular element. -To understand better remove the position: relative; from the parent div
The important thing is it will move from/toward the side you set to.

Fixed

As the name says, the element will stay fixed to the place where it is specified. It's very similar to absolute. Let's see,

position: fixed; : this makes the element detached from the parent element.
With position: fixed; the element is fixed in such a manner that it will not move even the page is scrolled up or down.

Sticky

Have you ever seen that when you scroll down a page and the navbar will still be at the top. Yeah that's position: sticky; for you.

This simply means that the element will stick to the place it's specified to.. (no only top always)
You can still specify Top/ Bottom/ Right/ Left to make it specific.

Thank you

If You enjoyed this blog.

Follow me on LinkedIn

Manas