Understand CSS position easily - Background Concept

We all know that CSS position property is too confusing sometimes. When you design a layout, you think of positioning elements. Although, there are number of options available for designing layout, CSS position property is one of the options. 

This article aims to explain this property in a simpler manner.  

Let's take a simple analogy to understand. 

Packing and positioning

Imagine you're packing a backpack to go somewhere. How do you arrange items in backpack ? If you drop everything inside backpack without arranging one by one, everything in the backpack will have it's own position automatically without you assigning it. But if you arrange the way you want, you assign a dedicated position to every items inside back. 

Now, think your backpack as a webpage. And items inside backpack as elements on webpage. So how do you arrange your elements on webpage. 

Normal flow

If you add items in backpack without arranging it, they got positioned themselves based on space available. Same thing happens to webpage. When you add elements to it, they positioned themselves based on rules defined by the normal flow.   

There are two types of elements on web page. 

1. Block-level elements.

2. Inline elements 

Block level elements are the elements that occupies entire horizontal line such as <h1>, <div>, <p> etc. Two block level elements can't be on the same line without styling. 

Inline elements doesn't occupy entire row. It occpies the space according to its content. Examples are <a>, <img>, <span> etc. They line up next to one another horizontally; when there isn't enough space left on the line, the content moves to a new line. 

Now Let's see how can we manipulate these default behaviour with CSS. 

CSS Position property

 This property provides facility to arrange elements as we want.There are 5 possible values of this property. 

• Static position
• Relative position
• Absolute position
• Fixed position
• Sticky position

Static Position

This is the default or normal positioning. So, if we take a backpack without arranging it, items inside it take default position. Same way, if you added 5 elements to web page, it will take the default position based on types of elements. 

In the above picture, items in the backpack are arranged one after another. Because each item's position is static which is the default value. 

Relative position

This position makes your item to move relative to its current position. If you want to move your water bottle next to the lunch box, you have to assign the position as relative. In relative positioning, when you change the position, the original space of the specific element will not remove from the normal flow. To make picture clearer, look at the below picture. 

 

Here, bottle has moved next to lunchbox, but the space occupied by bottle remains blank because it will not get removed from the normal flow. 

Absolute position

This is a tricky one to explain with example. Let's say you want to put your waterbottle inside the pocket of backpack. If so, then this pocket should be positioned other than its static position. 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, element's nearest ancestor should have position other than static. If this isn't the case then absolute positioned element will move to the top right corner of the backpack. That means it will position itself relative to the backpack. 

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. Check the picture below.

Here, water bottle has moved inside the pocket and space occupied by it is no longer there. Pencil box has moved to position of water bottle. 

Fixed position

Fixed position is like placing your items wherever you want, regardless of whether there are items in that place or not. Element with fixed position is positioned relative to its viewport which means it always stays in the same place even if the page is scrolled.  Look at the picture below.

 

Water bottle remains fixed even if page is scrolled. 

 Sticky position

This is also a tricky position to explain with this example. As the name says, it means that you stick your item into a particular place. For example, if you stick your bottle on top of your backpack, it will stick in that particular position in your backpack when you scroll up and down the backpacks. 

The behavior of sticky position is a combination of relative and fixed positions. Simply, inside the backpack, it will act as a fixed position and not move. But when you scroll to the second backpack, it sticks with the first backpack and moves relative to it. 

Did you notice how it sticks on th top of backpacks when it moves ? 

 

Alright, I hope you understand the concept behind the how CSS position works. I hope this article helped you to understand in a better way.  Don't forget to share your feedback, I would love to hear your thoughts.