To design and understand the page layouts, we need to understand the position property in css. An element is said to be positioned, when its position attribute is set.
position : relative || absolute || fixed || sticky (experimental);
The default value for the position attribute is static.
This post is one of the posts in the series of posts to understand the position attribute in css. Make sure to read all of them to fully understand the position attribute.
An element on DOM can be categorized in one of the following categories :
- position : static || relative — element is in the normal document flow.
- position : absolute || fixed — element is absolutely positioned.
- float : left || right — element is floating. Learn More about floats.
position:absolute does not cause the element to occupy the space in the normal document flow. Instead, position it at the specified position relative to its closest positioned ancestor or to the containing block.
We are rendering two colored rectangles and they occupy their respective real-estate on the document. As they are block level elements, they render one after the other.
If we apply, position:absolute to red rectangle then it does not occupy any space on the DOM. Hence, green rectangle is overlapping with the red ones.
Now, if we add blue rectangle to the DOM, it will be rendered in the second line. Because the green rectangle has occupied the first row.
Finally, if we apply position:absolute to green rectangle then it will be rendered on top of the red rectangle. And no one is occupying the first row. Hence, blue rectangle will be rendered in the first row behind red rectangle.