INTRODUCTION

The position property in CSS sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. Without understanding positioning concept properly, we will not be able to place the elements accurately in our websites.

In simple words, the position property is used to manipulate the location of an element.

Types of positioning values

We have five different positions namely- static, relative, absolute, fixed and sticky.

HTML code used for demonstration

<div class="box">This is relative(Parent block)
  <div class="item1">This is absolute</div>
  <div class="item2">This block is fixed</div>
  <div class="item3">This is relative</div>
</div>
<div class="item4">This is static</div>

<ul class="list">
  <li>This is sticky</li>
  <li>Contact</li>
  <li>Feedback</li>
  <li>Rate us</li>
</ul>

To create the bigger box (Parent):

  height:400px;
  width:400px;
  border: 5px solid black;
  margin: 20px auto;
  position: relative;
  text-align:center;
}

1. Static

It is the default position assigned to an element. It is always positioned according to the normal flow of the page.

Static positioned elements are not affected by the top, bottom, left, and right properties.

.item4{
  background-color: brown;
  color:white;
  text-align:center;
}

Output:

This static position refers to the brown box in the output. (Scroll Down! )

2. Relative

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

.item3{
  background-color: green;
  position: relative;
  top:100px; 
  left:30px;
  color:white;
  text-align:center;
}

Output:

This relative position refers to the green box in the output. Also, the bigger box is positioned as relative. The green box moves with respect to its original position.

3. Absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block.

Its final position is determined by the values of top, right, bottom, and left.

.item1{
  background-color: red;
  position: absolute;
  right:35px;
  top:40px;
  color:white;
  text-align:center;
}

Output:

This absolute position refers to the red box in the output. This is red box is positioned with respect to the bigger black box.

4. Fixed

This is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. (Try scrolling the output below!)

The top, right, bottom, and left properties are used to position the element.

.item2{
  background-color: blue;
  position: fixed;
  left:60px;
  color:white;
  text-align:center;
}

Output:

This fixed position refers to the blue box in the output. It remains there irrespective of any other element's position.

5. Sticky

A sticky element toggles between relative and fixed, depending on the scroll position.

It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

For this, the best example can be "Table of contents" of this article. It sticks to the top of the page, though you scroll down.

.list{
  background-color: skyblue;
  position:sticky;
  bottom:30px;
}

Output:

This sticky position refers to the sky-blue background in the output. It remained fixed at the bottom, until an offset of 30px is given from bottom, to make it relative.

You can use these links for reference:

See the Pen Positions in CSS by swathi (@swathi-jaishetty) on CodePen.

MDN Docs: developer.mozilla.org/en-US/docs/Web/CSS/po..

Conclusion

Hope this article added some value to your learning. Share this with your friends, if you find it informative. Thank you:)