Position in CSS
1. Position in CSS
The position property is used to define the position of an HTML element on a web page. This property is used when we don't want to position an element according to the normal flow of the page.
Position property can have one of the following values:
- static
- relative
- absolute
- fixed
- sticky
1.1. static positioning
static
is the default value of the position
property in CSS i.e if you don't define position
on an element, it will be set to static
. static elements are positioned according to the normal flow of the page. If an element is positioned other than the static and you want to set it according to the normal flow of the page then you can use position:static
on it;
1.2. relative positioning
When an element's position is set to relative
it can be moved from its normal position using the offset values such as left
, top
, etc. relative
also establishes the positioning context for the children elements of that element.
Example:
Html
<body>
<div class="box">
<div class="inner-box">
</div>
</div>
</body>
CSS
body{
height: 100vh;
display:grid;
place-items: center;
}
.box{
width: 20rem;
height: 10rem;
background: lightblue;
}
.inner-box{
height: 5rem;
width: 10rem;
background: orange;
border: 1px solid black;
}
Output:
In the above example, both the elements are positioned as static by default, and both the rectangles are exactly positioned where they should be in a normal flow. Now we will add the position:relative
to the inner rectangle and try to move it from its normal flow.
.inner-box{
position: relative;
top: 20px;
left: 20px;
height: 5rem;
width: 10rem;
background: orange;
border: 1px solid black;
}
Output:
As you can see after setting the position:relative
we were able to set the offset top
and left
on the inner rectangle which pushed it from the top and left.
1.3. absolute positioning
position:absolute
is used when you want to position an element relative to another element. The parent element must have the position:relative
on it. This will establish a positioning context both for the element itself and its children elements.
Example:
.inner-box{
position: absolute;
top: 20px;
left: 20px;
height: 5rem;
width: 10rem;
background: orange;
border: 1px solid black;
}
Output:
As soon as the position of the inner rectangle is changed to absolute
from relative
it jumped out of the blue box. This happened because currently, the inner box is looking for the parent element which has a positioning context on it. To position the orange box relative to the blue box we have to establish the positioning context of the blue box itself by adding position: relative
to the blue box.
.box{
position: relative;
width: 20rem;
height: 10rem;
background: lightblue;
}
Output:
Now the orange box is positioned relative to the blue box.
1.4. fixed positioning
position:fixed
sets the position of an element in relation to the viewport. It is removed from the normal flow of the page and does not affect the flow of other elements. A fixed element always stays at the same position in the viewport and does not scroll with the other elements of the page.
Example:
.inner-box{
position: fixed;
top: 20px;
left: 20px;
height: 5rem;
width: 10rem;
background: orange;
border: 1px solid black;
}
Output:
When we changed the position
of the orange box to fixed
and provided the top
and left
offset to it. It changed its position in relation to the viewport i.e. 20px away from the top and left and it always stays at that position.
1.5. sticky positioning
position: sticky
works just like the position: fixed
the only difference is that it always stays within the boundaries of its parent elements.
Example:
body{
height: 200vh;
display:grid;
place-items: center;
}
.box{
width: 20rem;
height: 20rem;
background: lightblue;
}
.inner-box{
position: sticky;
top: 200px;
height: 5rem;
width: 10rem;
background: orange;
border: 1px solid black;
}
Output:
As you can see the orange box behaves like a fixed and stays 200px away from the top until it touches the boundary of its parent element. After touching the boundary it scrolls up and down with its parent.
2. Conclusion
Positioning is not so hard to understand all it takes is a little understanding of how things work in CSS and with a little bit of practice, anyone can master the positioning in CSS.