CSS position explain! Absolute vs relative vs fixed vs sticky
Position property is one of the basic element in CSS. This article explains you the different between those and what you can do about it.
position: static
Static is the position by default. The CSS layout box model allocate space element by element, one after the other. That’s what we call the flow layout.
Bear in mind that there is other ways to change the flow in CSS, such as the float property and the flexbox layout. In this article, we are not considering those here to focus on position property only.
HTML
<body>
<span>Body</span>
<div class="c1">
<span>C1</span>
<div class="c2">
<span>C2</span>
<div class="square1">Square 1</div>
<div class="square2">Square 2</div>
</div>
</div>
</body>CSS
body {
margin: 0px;
padding: 10px;
background-color: yellow;
}.c1 {
background-color: #ffd082;
padding: 10px;
}.c2 {
background-color: #efa8ea;
padding: 10px;
}.square1 {
width: 70px;
height: 70px;
background-color: #88e1f2;
}.square2 {
width: 100px;
height: 100px;
background-color: #ff7c7c;
}
It is going to look something like this. There are 2 points here:
- div.square2 is placed after div.square1
- they both are positioned inside div.c2
Notice that you don’t need to define position: static here because this is the default value.
If you want to verify that, you can check it in the browser’s inspector window. In Firefox, press F12 (or right click and click Inspect). Go to Computed tab and type in “position” and click Browser Styles. You will see that the element is set to static here.
position: absolute
Now, let’s change div.square1 to position absolute like this:
.square1 {
width: 70px;
height: 70px;
background-color: #88e1f2;
position: absolute;
top: 0px;
left: 0px;
}
There are few things happened:
- div.square1 is now positioned relative to body instead of div.c2.
- div.square1 is now out of the flow layout. All elements (body, c1, c2, square2) are rendered such that div.square1 doesn’t exists at all.
Now, we have to introduce the relative property. Let’s set div.c1’s position to relative.
.c1 {
background-color: #ffd082;
padding: 10px;
position: relative;
}
Now div.square1 is positioned relative to div.c1 instead of body!
The relative position
Absolute element will be positioned to the nearest relative element. When no parents are relative, it will be positioned to the root of the document, which is body. But now when div.c1 is relative, div.square1 will be positioned relative to that.
Now let’s change div.c2 to relative, too.
.c2 {
background-color: #efa8ea;
padding: 10px;
position: relative;
}Your element is positioned relative to the viewport, and your element will be out of the flow layout.
As expected, div.square1 is not positioned relative to div.c2 instead of div.c1 because div.c2 is the closer parent.
So what is it use for?
Example 1: Price Tag
When you need to put the Sales tag in a specific position inside a grid regardless of it’s flow layout. Here we set the div.grid to position relative, and div.tag to position absolute with bottom and right property 0px.
HTML
<body>
<div class="grid">
<div class="tag">Sales</div>
<div class="price">$1,000</div>
</div>
</body>CSS
.grid {
background-color: #ffd082;
margin-bottom: 20px;
width: 60px;
height: 50px;
padding: 10px;
position: relative;
}.grid .price {
text-align: center;
}.grid .tag {
position: absolute;
bottom: 0px;
right: 0px;
font-size: 0.5em;
background-color: red;
color: white;
padding: 1px 4px;
}
Example 2: Caption on image
HTML
<body>
<div class="grid">
<div class="tag">Lovely Tiger!</div>
<img src="https://static.scientificamerican.com/sciam/cache/file/5C51E427-1715-44E6-9B14D9487D7B7F2D_source.jpg?w=590&h=800&EA562668-5B43-4B0F-8F081C64132DE4F6" />
</div>
</body>CSS
.grid {
position: relative;
display: inline-block;
}.grid img {
width: 100px;
display: block;
}.grid .tag {
position: absolute;
bottom: 0px;
right: 0px;
font-size: 0.5em;
background-color: #efa8ea;
border-radius: 4px 0px 0px 0px;
padding: 1px 4px;
}
position: fixed
The element is positioned relative to the viewport, but not any element.
What is viewport?
Viewport is the user visible area. That basically is page viewable area in the browser. Unlike elements, scrolling won’t change the viewport. That means your fixed element will be on the same position while you are scrolling.
Example 1: Top Menu Bar
In this example, the div.menu is always fixed on top when you are scrolling.
HTML
<body>
<div class="nav">
<div class="menu">Menu 1</div>
</div>
</body>CSS
body {
margin: 0px;
height: 8000px;
}.nav {
position: fixed;
top: 0px;
height: 20px;
padding: 4px;
background-color: #ffd082;
width: 100%;
}
Example 2: Bottom Icon
In this example, the whatsapp icon is always fixed to the bottom right.
HTML
<body>
<div class="bottom-icon">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/150px-WhatsApp.svg.png" />
</div>
</body>CSS
body {
margin: 0px;
height: 8000px;
}.bottom-icon img {
width: 30px;
}.bottom-icon {
position: fixed;
bottom: 0px;
right: 0px;
}
position: relative;
In above position: absolute section, we explained how relative can be used together with absolve. But you can use relative in an isolated case.
Go back to the first example in this article, and we add relative position to div.square1.
CSS
.square1 {
width: 70px;
height: 70px;
background-color: #88e1f2;
position: relative;
top: 50px;
}
What happen here?
- div.square1 is still relative to div.c2 following the default flow layout rule.
- div.square1 now is offset to 50px because of top: 50px; setting.
- the original space of div.square1 is preserved. As a result, the position of div.square2 doesn’t change at all!
Example: No Example.
No. There is no use case. You can forget about this property setting.
position: sticky;
Now we change div.square1 to sticky.
CSS
.square1 {
width: 70px;
height: 70px;
background-color: #88e1f2;
position: sticky;
top: 0px;
}Before scrolling down, this look exactly like position static.
After scrolling, when div.square1 reaches to top 0px, it’s going to stick there. That’s what sticky means.
Example: No Example.
No. There is no use case. You can forget about this property setting.
Conclusion
Here is everything you need to know about CSS position. If you prefer a video version of this, checkout below YouTube video!