The ability to position elements on a page is a must-have for every web developer. I see beginners struggle with it every now and then, and to be honest, I did too. But if you take your time and get this right, you will come to realize that it's not that big of a deal at all. Let's learn more about the position property in CSS, shall we?
The position CSS property
The position property tells the browser how an element should be positioned on the page. By default, the value of the position of an element is static, but we can modify it to be any of the following values: relative, absolute, fixed, sticky. In this post, we will go over each of them.
Examples that we'll be seeing in this article
We will use a simple HTML code which is really basic for our better understanding. It contains a container div, and 3 child div elements, that we will position throughout the examples. I've also added different colors to these child div elements, so it will be easier to see the difference.
<!DOCTYPE html>
<html>
<head>
<title> CSS positions </title>
<style>
.container {
background-color: lightblue;
padding: 20px;
}
.container > div {
padding: 15px;
}
.container span {
margin-bottom: 20px;
}
.first {
background-color: lightgreen;
}
.second {
background-color: lightcoral;
}
.third {
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div class="container">
<span>Container</span>
<div class="first"> First </div>
<div class="second"> Second </div>
<div class="third"> Third </div>
</div>
</body>
</html>
Static
This is the default value of the position property. If the position of an element is static, the element will render in order, based on its position in the original document flow.
This is what it looks like -
Relative
If we set the position of an element to relative, it will appear in the document as it would by default using static. The trick is that by setting position relative, we gain access to the following CSS properties: top, left, right, bottom. With these, we can add an offset to the specific direction. So for example, if we set left: 20px. The element will be placed 20 pixels to the right. If we would have provided -20px it would push the content to the left with 20 pixels.
If we make the following changes:
.second {
background-color: lightcoral;
position: relative;
left: 20px;
}
Here's the result -
Fixed
With fixed position, we also have access to the top, left, right, bottom properties. In this case, the element is positioned relative to the browser window's viewport.
So, if we set top 70px and left 20px on a fixed positioned element it will appear 70 pixels from the top of the viewport and 20px from the left edge of the viewport. Fixed position also removes the document from the normal document flow.
If we change the CSS to this:
.second {
background-color: lightcoral;
position: fixed;
left: 20px;
top: 70px;
}
This will be the result-
Absolute
Absolute position is the one which can trick developers. It is working like the fixed position, but it is not positioned relatively to the viewport, instead, it is positioned based on the closest positioned element (which has a position value other than static). If there are no positioned parents it will be positioned relative to the viewport (Same result as it would be with fixed).
Now let's make the following changes to your CSS:
.second {
background-color: lightcoral;
position: absolute;
left: 20px;
top: 70px;
}
We will get the same result as we got with the fixed position-
If we add a position value to a parent, in this case, we will add it to the container div, the child with absolute value will be positioned relative to that. We often use relative position for the parent as it won't remove it from the standard document flow and the parent will be placed in the site where it would have been without position: relative.
Let's add relative position to the container:
.container {
background-color: lightblue;
padding: 20px;
position: relative;
}
This is the result-
Sticky
Using sticky will position our element based on the user's scroll position. It toggles between position relative and fixed. We can provide the offsets using top, left, right and bottom. Until the specified offsets are met the element acts like a relatively positioned element, but when the scroll position is greater than the offset it 'switches' to position fixed and be positioned relative to the viewport. It stays fixed until the user scrolls back to the opposite direction and the distance will be less than the offset, then it goes back to act like a relative positioned element again.
To be able to scroll add 3 times the height of the viewport to our container
.container {
background-color: lightblue;
padding: 20px;
height: 300vh;
}
We need to add the sticky position and the top offset to the element:
.second {
background-color: lightcoral;
position: sticky;
top: 0;
}
The result-
Now, by default, the page looks like we haven't done anything. But if we scroll down, below the second div, it sticks to the top directly (because of the 0px offset, add more if you need), and scrolls with the content in that fixed position. If we scroll back to the top, it will be placed in its original position.
And this is everything you'll ever need to know in order to position elements on a webpage like a pro.