Suppose you have a nav bar on your website and want to move it as the user visits different sections of your website. Alternatively, on a particular page, you want to show something that stays in a fixed position no matter how much the user scrolls. How will you achieve this?
Here comes our ‘Position’ property of CSS:
‘ This is the property of the child not the parent’
So, it has 5 different values:
Static
Relative
Absolute
Fixed
Sticky
Suppose you have this code and your output will look like the below image(I’ve added some CSS to differentiate them):
<div class="big-container">
<div class="child-1 child">Services</div>
<div class="child-2 child">Bookings</div>
<div class="child-3 child">Contact us </div>
<div class="child-4 child">About us</div>
</div>
1. Static:
Everything will remain the same as you mentioned in your HTML file structure or by default HTML elements are static, they don’t change their position, they are rendered as structured in an HTML file. so the output will remain as above.
but lets say you want to position ‘bookings’ box another place or position, not where it is now, how will you do that? To do this you got 4 options: Relative, Absolute, Fixed, and Sticky. You can choose depending upon your requirement.
2. Relative:
- To make any child relative, you’ve to select it using CSS selector in case of internal CSS (as seen in code below) or while using inline CSS you have to write: Position: relative; and now you’ve unlocked the four options: 1. top 2. left 3. right and 4. bottom
.child-2 {
background-color: rgb(92, 39, 39);
position: relative;
top: 20px;
left: 30px;
}
- These four options will be unlocked in all these four (relative, absolute, fixed, and sticky) position properties.
- Relative moves the child container or any HTML element, relative to its previous position when structured in an HTML file. eg:
- It is like comparing yourself to when you joined the Gym one month before and now, and you’re moving you’re body (HTML element) using the top, left, right, and bottom and your place will remain intact or your photo of one month (previously where it was) before will remain the same, no one has replaced it or deleted it.
- and top, right, left, and bottom values will be calculated from the previous position when you mark the position relative.
- it is relative to its previous position, not any ancestor or viewport.
In one word: “mai kha tha and ab kha hoon” (where I was, when I am now)
3. Absolute:
- It follows just its previous ancestor whoever has the position value relative. (we set the ancestor’s position as relative so that the child knows where to take the reference point or else it will take the HTML body) and its place is no longer intact, another element will come to its place
.big-container{
position: relative;
}
/* case1: */
.child-2{
position: absolute;
}
/* case2: */
.child-2 {
position: absolute;
top: 0px;
right: 0px;
}
/* case3: */
.child-2 {
position: absolute;
top: 150px;
right: 20px;
}
case-1 image:
case-2 image:
case-3 image:
- So if you don’t give any top, right, left, and bottom values, it will a in its own position where it was previously and its place is taken by other elements, but it will be on top of the stacking(this is controlled by z-index).
- and if you give any value to the top, right, left, and bottom, then it will be calculated from the nearest ancestor who has having position value relative. (as you can see in images 2 and 3) Note: if you don’t give the relative position to an ancestor, it will also work fine in some cases but don’t know when the bug will come in our software so better give)
4. Fixed:
- It removes the child from its current window and places it in the viewport window.
- you’ve definitely seen those ‘+’ icons on notepads or ‘support’ buttons on websites or fixed nav bar at the top of the website. They are controlled by position: fixed; property.
- No matter where you scroll or what you do, it remains fixed to the entire window of the website.
- If you don’t mention top, right, left, and bottom values, it will remain at the same position where it was when structured in the HTML file but if you give any values top, right, left, and bottom, it will be calculated from the viewport.
.child-3 {
position: fixed;
}
.child-3 {
position: fixed;
top: 0px;
right: 0px;
}
.child-3 {
position: fixed;
top: 45px;
right: 50%;
}
- But if you want to control its position from the viewport, you can do so by mentioning the values of the top, right, left, and bottom as shown in the figure.
5. Sticky:
Here comes our last value, sticky.
there is not much difference between fixed and sticky, but one thing is: fixed works in the viewport but sticky works in its current context.
Didn’t get it, right? see the first images then below I’ll explain:
after scrolling to reach the footer:
Do you get it? As we can see our big-container contains four elements, when it is finished or the user scrolls over it and moves to another section it disappears but in case of fixed, it remains on the screen no matter which section of the screen you’re scrolling or visiting.
- Its position is controlled via top, right, left, and bottom values w.r.t. its closest ancestor.
.big-container{
position: sticky;
}
- if you don’t mention top, right, left, and bottom values, it remain on the same place but in a sticky fashion.