May 5, 2020
Understanding CSS Position in 2 Minutes
A quick summary on the CSS Position properties.
Static
By default, every element has a static position in the DOM, ie it follows the Document Flow. That means, the browser renders the elements in sequential order. If we have:
<h1>Hey yo </h1>
<h1>Hellooo</h1>We are expected to get :
Relative
The only difference between relative and static is:
A relative positioned element allows us to use the CSS positional properties on it ( top, right , bottom and left ). Using the positional properties will place the element in relative to its parent.
If we have:
<div> <h1 style="position: relative; left: 50px;">Hey yo</h1> <h1>Hellooo</h1></div>
We get:
Absolute
Absolute positioned elements are removed from the Document Flow. That means the browser will no longer render them in sequential order.
Applying positional properties on an absolute element will be placed in relative to its closest positioned parent. If all of its parents are not positioned, ie they are all static elements, then the absolute element will be placed in relative to the HTML body tag.
We get:
From:
<div> <h1>Hey yo</h1> <h1 style="position: absolute; top: 15px; left: 20px;">Hellooo</h1> <h1>hehehe</h1></div>
Fixed
Similar absolute , fixed elements are removed from the Document Flow as well. However, the position of fixed element is relative to the viewport. In other words, a fixed element will remain at a fixed position on your screen as you scroll the page.
We get:
From:
<div style="height: 2000px;"> <h1>Hey yo</h1> <h1 style="position: fixed; top: 15px; left: 20px;">Hellooo</h1> <h1>hehehe</h1></div>
Sticky
sticky elements behave similarly to fixed element, but their placement is in relative to their parent instead of the viewport.
We get:
From:
<div style="height: 150px; overflow-y: scroll;"> <h1>Hey yo</h1> <h1 style="position: sticky; top: 15px; left: 20px;">Hellooo</h1> <h1>hehehe</h1> <h1>hohoho</h1> <h1>hueuueue</h1></div>
That’s it! Let me know if you have any questions in the comment.
