In this article we will talk about CSS POSITIONS. Knowing this property is very helpful when it comes to design a layout.
The CSS position property simply defines where an element is placed on a webpage.
The syntax:
position: desired position;
we have 5 types of positions property :
STATIC
RELATIVE
ABSOLUTE
FIXED
STICKY
Along with one of the above values we can use top , left , right , bottom properties to further arrange the element in an respective directions.
Before going to deep lets understand with the help of an example
In our home we have a almirah were we put our clothes. Now think about how you put your clothes?? If you put every clothes inside the almirah without folding them then they acquire their own positions. But if you have to place them in an specific position then we have to provide some dedicated positions to it.
Now lets think about our webpage is an almirah and all the elements present their is a type of clothes. So how do you position your element on a web page ??
Lets learn about this one by one
- STATIC
This is the default position available to us .If we take the example in our almirah all the clothes get their default position when we just put inside the almirah without folding or providing them a specific position.
On a web page if we add 3 elements with static positioning then top, left , right ,bottom doesn't make any difference .
In the above picture, you can see that their are different blocks arranged one after another. This is because each item's position value has been set as static which is the default value. It is automatically arranged according to the normal flow.
Let's move on to relative positioning.
- RELATIVE
The relative positioning tells your item to move relative to its current position. So, for example, if you want to move your B block next to the A, you have to assign the position as relative and give relevant values to move next to the A.
When you move the B block next to the A block, the position it originally occupied is blank because the pencil case has not taken that place just because you moved the block.
In relative positioning, when you change the position, the original space of the specific element will not remove from the normal flow.
If you look at the below picture, you will see that the block A has moved next to the Static block, but the original space remains blank because it will not get removed from the normal flow.
- Absolute position
Now, this is a tricky position to explain with our example. Let's say that you want to put your water bottle inside the pocket of the backpack. If so, this pocket should have a relative or any other position, other than static position, already assigned to it. So we can place it inside the pocket in an exact position. And this position is decided relative to the pocket.
If the pocket doesn't have any position assigned to it other than static, and if there are no other nearest items or places assigned with a non-static position, it will move to the top right corner of the backpack. That means it will position itself relative to the backpack; then, you can assign an absolute position based on where you want to place it.
Simply, it means that the parent element must have a position property value other than static for the absolute position to work. If there is no element with a position property value, the element will be positioned relative to the viewport.
When you assigned an absolute position to an element, it removes from the normal flow, the space that the element was originally occupying is no longer there.
Check the below picture. Now your water bottle has an absolute position inside the pocket. Also, the pencil case has moved to your bottle's original space.
- FIXED
When an element assigned the property as fixed then that element is fixed at their position relative to its viewport i.e. the element did not move when scroll up and down.
- STICKY
As the name says, it means that you stick your item into a particular place. The position: sticky is a combination of position relative and position fixed. The element's position is determined by the user's scroll. The element will behave like a relative positioned element until the viewport meets a specified position. And then the element would get "fixed" in that spot.
Did you notice how the setting fixed at the top ?
Alright, I hope you understand the different values in position property and how those behaves.
There's one more concept that you need to understand when you are working with positioning. That is z-index. Let's see what it is all about.
- Z-INDEX
when the elements overlapp each other then we can use Z-index to stack them .
lets say we have multiple books that we want to stack so we can give every book a number from highest to lowest so the highest number book is on the top and the lowest is on the bottom.
Z-index helps you to stack the element one after the other. Any element that has a position value other than the static position can use the z-index property.
if we give highest value to z-index then it can place that element to the top of another element.