Position in CSS
CSS is used for beautifying the webpage, CSS positioning is very crucial in moving elements from one place to another place, or aligning them here and there as per design requirements. When moving one element, we always have to mind the positions of other neighbouring elements. By using CSS position the position of an element in the page is decided. The elements that can be positioned using position can be anything like an image, section, div, article etc.
Various positionings in CSS
There are various positionings in the CSS like absolute, relative, fixed, static, sticky etc.
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS position</title>
</head>
<body>
<div class="box-container">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
<div class="box box-3">Box 3</div>
<div class="box box-4">Box 4</div>
</div>
</body>
</html>
.box-container {
width: 200px;
height: 200px;
border: 1px solid red;
}
.box {
width: 40px;
height: 40px;
border: 1px solid blue;
margin: 5px;
}
.box-2 {
position: absolute;
top: 100px;
left: 50px;
}
The positions of CSS are written using the position keyword, as shown in the code snippet above. We can use top, right, bottom and left keywords to position the element further.
position: absolute
When the position is set to the absolute of an element, it will not follow the regular flow of the document as others. It is then positioned concerning its closest ancestor or the parent if there is no ancestor present.
Example:
In the above example, "Box 4" is set to position absolute, so it is not following the regularity of margin between each box. If we give any top, bottom, left or right values to box 4, it will then change its position from its parent box the one having a magenta border in this case.
We can see that Box 4 is aligning from the left and from the top concerning the magenta box, this is because it has no ancestors.
If we set the position to the absolute for all the boxes then they will stack over one other, one such example is shown below.
As expected all the boxes take their positioning concerning the red box, i.e. ancestor.
position: relative
When the position is set to relative, it will follow the regular document flow and all the properties like top, bottom, left and right are considered from its original position.
Example:
The fourth box is positioned for its original position, as per the regular flow of the document. We can see that the position of box 4 according to flow remains there and is not captured by any other box. While in the case of position absolute the space is not reserved and gets captured.
position: static
Static position, as the name suggests will remain at its position and there will be no effect of any values of top, left, right, bottom & z-index. It is the default value for the position.
CSS:
.box-4 {
position: static;
top: 30px;
left: 50px;
}
The values of the left and top are ineffective because the position is set to static.
position: fixed
Position fixed is very straightforward, when applied to an element it is fixed to the position it is set to. The other elements follow the regular document flow.
CSS:
.box-3{
border-radius : 50%;
background-color: cyan;
position: fixed;
top: 20px;
left: 50px;
}
The third box is fixed to its position and remains unaffected by its neighbouring elements.
position: sticky
The position sticky is similar to position fixed, but the key difference is that in the case of sticky the element behaves like fixed once it has reached its defined position, before that it behaves like the other elements in the document.
CSS:
.sticky-box{
position: sticky;
top: 30px;
left: 40px;
}
From the example shown above, it is clear that a sticky behaves like a fixed once it has reached its defined position.
More can be learned from MDN docs.
Happy Learning :)