👋 Hello everyone! Hope you all are doing great.
In this post, we are going to learn about the position property of CSS. Let's get started. 🚀
The position property allows the developer to define or change how the HTML elements (or tags) are arranged in the browser. There are 4 types of position property in CSS, let's talk about them one by one.
Syntax
position: static;
position: relative;
position: absolute;
position: fixed;
Static
This property is applied to every element in an HTML document by default. The static property arranges every tag in the HTML document from top to bottom and giving each element its own space (either block level or inline level). From now on, let's use a code snippet to understand the properties more.
This will be our HTML.
<html>
<body>
<div class="parent">
Parent
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
</html>
And this will be the CSS.
.parent {
}
.one {
}
.two {
}
.three {
}
I removed other CSS styling to make it easier to understand. Currently, this is how the HTML document looks in the browser.
As you can see, the elements are arranged from the top. This is how the default static positioning works. It places elements in the browser based on how the elements are arranged in the HTML document.
Relative
To understand the relative and absolute properties, let's hypothetically split the HTML document into 2 different layers,
- The static HTML layer.
- The relative and absolute HTML layer.
The static layer is where all the elements are stored by default, and when you give the property position: relative; to the element with class .one.
.one {
position: relative;
}
This is how it looks,
Yes, nothing changed. we will talk about this behavior later on
Imagine that element is getting removed from the 1st layer and placed into the 2nd layer. Now, since the element is now in the 2nd layer, it is not being controlled by the static property anymore. This means, we are now free to move this element wherever we want in the HTML. Ok, how to change the location of this element now?
For this we can use the top, bottom, left and right properties in the CSS.
Now let's move the element 0px from the top.
.one {
position: relative;
top: 0px;
}
This is the output,
As we can see, nothing changed. But what did it actually do? The top property moved the element 0px from where it was previously located. In this case, the element is in the same location.
To put it simply, the element is moved in relative to where it was previously located in the first layer.
Absolute
The absolute position is similar to relative position. When you give an element position: absolute; attribute, that element gets removed from the 1st layer and placed into the 2nd layer. But the difference here is, after removing from the first layer. The first layer treats as if this element never existed in that layer and rearranges the rest of the elements to fill up the gap of that element. Lets see this via an example
.parent {
}
.one {
}
.two {
}
.three {
position: absolute;
}
This is how it looks in the browser,
As you can see, the element "three" is being excluded from the first layer completely. The first layer renders as if the element "three" never existed. Since we moved this element out of the 1st layer and placed it in the 2nd layer, let's add the top and left property and see where this element goes.
.parent {
}
.one {
}
.two {
}
.three {
position: absolute;
top: 0;
left: 0;
}
What happened here? Well, The top attribute moved the element 0px from top and 0px from left of the entire HTML document.
And it is also worth noting that the element which was moved to the 2nd layer with absolute property stopped behaving like a block level element and started to take only as much space it needs.
In general, The absolute position moves the element with respect to the parent of that element in the 2nd layer.
Here, in the previous example, The element "three" had a parent named "parent". But the "parent" was on the 1st layer, not the 2nd layer. Now lets bring the parent into the 2nd layer.
.parent {
position: absolute;
}
.one {
}
.two {
}
.three {
position: absolute;
top: 0;
left: 0;
}
This is how it looks in the browser,
Since the parent of the "three" element is moved to the 2nd layer, the "three" layer moved 0px from the top and 0px from the left of its parent, which is in the 2nd layer. The parent is also not behaving like a block level element anymore.
Now what do you think if I changed the parent to relative position? guess the answer ;)
.parent {
position: relative;
}
.one {
}
.two {
}
.three {
position: absolute;
top: 0;
left: 0;
}
This is how it looks in the browser,
This is because, when we assign property absolute or relative to an element, the element moves to the 2nd layer. In the 2nd layer, if the element is relatively positioned, it will behave like a block level element and 1st layer renders other elements as if the element is still present in the 1st layer. When the element gets assigned with absolute property, the element gets moved to the 2nd layer. The first layer renders other elements as if element "three" never existed in the HTML document. The element "three" moves 0px from top and 0px from left from its parent which is in 2nd layer, which is "parent".
Fixed
There is one last property called fixed. It is very simple to understand, it is very similar to absolute position, but instead of removing from 1st layer and placing on 2nd layer. Think of it as removing that element and sticking to your screen. When you use top, bottom, left and right properties, the element is moved with respect to your screen. That is, if you add top: 10px, it will move the element 10px from your top of your screen. That means, it can be fixed to a point and no matter how long you scroll down, the element will be fixed 10px from the top of your screen.
Thinking position properties as different layers of an HTML document helps us understand more about them easily. I hope this article was helpful for understanding CSS position property.