Revisiting the basics - Position in CSS

In this article, I'll explain about CSS Position Property — one of the most basic CSS concepts. I will explain with examples each value associated with this property. I hope this will be helpful in better understanding.

What is the Position in CSS?

"Position" is a CSS property just like other properties. This property helps in placing an element or a group of elements at a particular location with respect to other elements or browser window.

The position property accepts 5 different values — static, relative, absolute, fixed and sticky.

position : static

Adding static position to any element is equivalent to not applying any position property at all. Generally, this value isn't counted in CSS positioning.

OK. Let's discuss about the importance of static positioning.

Static position allows an element to behave normally. This is extremely useful when you need to override the inherited position value of an element.

Properties like z-index, top, bottom, left and right will be invalid when the position is set to static.

HTML

 <div class="box">  
 </div>  

CSS

 .box{  
  position: static;  
  top: 20px;  
  width: 100px;  
  height: 100px;  
  background: green;  
 }  

Result

Jsfiddle Demo

position : relative

Relative position lets HTML elements behave as if they were not positioned. This means the normal flow of the elements is preserved with relative position.

Now, the properties like z-index, top, bottom, left and right will work!

Let's checkout this example:

HTML

 <div class="box">  
  First box  
 </div>  
 <div class="box second-box">  
  Second box  
 </div>  
 <div class="box">  
  Third box  
 </div>  
 <div class="box">  
  Fourth box  
 </div>  
 <div class="box">  
  Fifth box  
 </div>  

CSS

 .box{  
  position: relative;  
  height: 100px;  
  width: 100px;  
  float: left;  
  /* Little Decoration*/  
  background: green;  
  padding: 10px;  
  margin-right: 20px;  
  z-index: 100;  
  box-shadow: 0 0 5px #333;  
 }  
 .second-box{  
  top: 40px;  
  right: 40px;  
  z-index: 200;  
 }  

Result

JsfiddleDemo

In the above code, I have shifted the second box using the properties top and right. You can see it doesn't affect the neighbouring elements' flow.

Note: Relative position will not work if the element already has table-header-group, table-row-group, table-column, table-row, table-cell, and table-caption properties.

position : absolute

Absolute position lets you position an element with respect to the nearest positioned ancestor element. This value breaks the normal flow of an element and doesn't leave any gap in the natural flow of other sibling elements.

Let's understand this with the help of following example.

HTML

 <div class="box">  
  <div class="small-box">  
   <div class="extra-small-box">  
   </div>  
  </div>  
 </div>  

CSS

 .box{  
  position: relative;  
  height: 200px;  
  width: 200px;  
  background: yellow;  
 }  
 .small-box{  
  position: absolute;  
  bottom: 10px;  
  left: 20px;  
  height: 100px;  
  width: 100px;  
  background: green;  
 }  
 .extra-small-box{  
  position: absolute;  
  top: 10px;  
  right: 10px;  
  height: 40px;  
  width: 40px;  
  background: blue;  
 }  

Result

JsfiddleDemo

In the above example, you can see that there are 3 different boxes of different sizes having different colors. The first is the parent of second and the second is the parent of third. Each element has a position property defined.

With the help of absolute position, we were able to place the child boxes at desired locations inside their respective parent boxes. If you see carefully, the third box is positioned with respect to the 2nd box and not 1st box. Hence, it doesn't matter whether the parent element has position set as relative or absolute.

position : fixed

Fixed position fixes the location of an element with respect to the screen's viewport i.e. default browser window or an iframe. Elements with fixed position do not move when the page is scrolled. Just like absolute positioning, this doesn't create gap in the natural flow of other elements.

Checkout the following example:

HTML

 <div class="box">  
 </div>  
 <p>Lorem ipsum dolor sit amet ...</p>  

CSS

 body{  
  height: 1000px;  
  background: #ccc;  
 }  
 .box{  
  position: fixed;  
  top: 20px;  
  left: 100px;  
  height: 100px;  
  width: 100px;  
  background: red;  
 }  
 p{  
  font-size: 20px;  
  font-weight: 700;  
  color: green;  
 }  

Result

JsfiddleDemo

position : sticky

Sticky position is an experimental feature that has not been implemented by all the browsers. Sticky position is a mixture of relative and fixed positions.

Let's demonstrate this with an example:

HTML

 <div class="box">  
 </div>  
 <p>Lorem ipsum dolor sit...</p>  

CSS

 body{  
  height: 1000px;  
  background: #ccc;  
 }  
 .box{  
  position: -webkit-sticky;  
  position: -moz-sticky;  
  top: 20px;  
  left: 100px;  
  height: 100px;  
  width: 100px;  
  background: red;  
  margin-top: 200px;  
 }  
 p{  
  font-size: 20px;  
  font-weight: 700;  
  color: green;  
 }  

Result

JsfiddleDemo

As seen in the above demo, the element behaves as a relative element until the viewport is scrolled by 100px where it behaves like a fixed element. If none of the top, bottom, right and left property is defined, the element will behave as a relative element.

Currently this feature works only in FireFox 32+, Safari 7+ and iOS Safari 7.1+. You have to additionally use vendor prefixes -moz-* and -webkit-* to make it work.

I hope this article was helpful to you. Try experimenting with the above code snippets.

Happy Reading!!