Detailed guide on Positions in CSS

Hello friends, In this article I am going to explain you CSS position in details, So let's start without wasting any further time.

What is Position in CSS:

The position property in css is used to specify the position of an element.

There are 5 different position values:

• static
• relative
• absolute
• sticky
• fixed

After setting position property to any one from the above values, you can position an element by using top, right, bottom and left.

So, let's first understand each value step by step:

Static:

• static position is default position type in CSS
• Element's position will not be impacted if you add position:static in you css. Let's understand static position with an example:

<div class="container">
   <div class="box box1">Box 1</div>  
   <div class="box box2">Box 2</div>  
   <div class="box box3">Box 3</div>  
</div>

.box1{
  background-color: red;
}
.box2{
  background-color: yellow;
  position: static;
  top: 50px;
  right:10px;
}
.box3{
  background-color: green;
}

I have applied position: static; to box2. But as you can see in below image, box2 has not moved from it's original position.

Relative:

• An element with position: relative; is positioned relative to its normal position.
• Setting up top,right, bottom and left will move this element away from its original position. Let's understand relative position with an example:

.box1{
  background-color: red;
}
.box2{
  background-color: yellow;
  position: relative;
  top: 50px;
  right:10px;
}
.box3{
  background-color: green;
}

I have applied position: relative; to box2. As you can see in below image, box2 has moved from its original position, From top 50px and from right 10px.

Absolute:

• An element with position: absolute; is positioned relative to its positioned parent element. In our example below, container is parent of box2 and if we give position:relative to container and position:absolute to box2, if we set top, left, right and bottom for box2, it will move relative to container position.
• However, if box2's parent does not have position:relative to it, then box2 will positioned relative to body container. Let's understand absolute position with an example:

.container{
  height: 200px;
  width: 1000px;
  background-color: #a29bfe;
  position:relative;
}
.box1{
  background-color: red;
}
.box2{
  background-color: yellow;
  position: absolute;
  top: 50px;
  right:10px;
}
.box3{
  background-color: green;
}

I have applied position: absolute; to box2 and position:relative to container. As you can see in below image, box2 has moved relative to container's position, From top 50px and from right 10px.

Fixed:

• An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
• Notice the fixed element in the lower-right corner of the page.
• Here is the CSS that is used:

.box1{
  background-color: red;
}
.box2{
  background-color: yellow;
  position: fixed;
  top: 50px;
  right:10px;
}
.box3{
  background-color: green;
}

Sticky:

• An element with position: sticky; is positioned based on the user's scroll position.
• 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)..

To understand sticky position, check below codepen

I hope you got a good understanding of positions in css. it gives me pleasure to help and inspire people. If you have any questions, feel free to reach out!

Connect me on Linkedin and GitHub!

Visit my Blog for more articles like this.