1. Position in CSS

The position property is used to define the position of an HTML element on a web page. This property is used when we don't want to position an element according to the normal flow of the page.

Position property can have one of the following values:

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky

1.1. static positioning

static is the default value of the position property in CSS i.e if you don't define position on an element, it will be set to static. static elements are positioned according to the normal flow of the page. If an element is positioned other than the static and you want to set it according to the normal flow of the page then you can use position:static on it;

1.2. relative positioning

When an element's position is set to relative it can be moved from its normal position using the offset values such as left, top, etc. relative also establishes the positioning context for the children elements of that element.

Example:

Html

<body>
  <div class="box">
    <div class="inner-box">
    </div>
  </div>
</body>

CSS

body{
  height: 100vh;
  display:grid;
  place-items: center;
}

.box{
  width: 20rem;
  height: 10rem;
  background: lightblue;
}

.inner-box{
  height: 5rem;
  width: 10rem;
  background: orange;
  border: 1px solid black;
}

Output:

image.png

In the above example, both the elements are positioned as static by default, and both the rectangles are exactly positioned where they should be in a normal flow. Now we will add the position:relative to the inner rectangle and try to move it from its normal flow.

.inner-box{
  position: relative;
  top: 20px;
  left: 20px;
  height: 5rem;
  width: 10rem;
  background: orange;
  border: 1px solid black;
}

Output:

image.png

As you can see after setting the position:relative we were able to set the offset top and left on the inner rectangle which pushed it from the top and left.

1.3. absolute positioning

position:absolute is used when you want to position an element relative to another element. The parent element must have the position:relative on it. This will establish a positioning context both for the element itself and its children elements.

Example:

.inner-box{
  position: absolute;
  top: 20px;
  left: 20px;
  height: 5rem;
  width: 10rem;
  background: orange;
  border: 1px solid black;
}

Output:

image.png

As soon as the position of the inner rectangle is changed to absolute from relative it jumped out of the blue box. This happened because currently, the inner box is looking for the parent element which has a positioning context on it. To position the orange box relative to the blue box we have to establish the positioning context of the blue box itself by adding position: relative to the blue box.

.box{
  position: relative;
  width: 20rem;
  height: 10rem;
  background: lightblue;
}

Output: 

image.png

Now the orange box is positioned relative to the blue box.

1.4. fixed positioning

position:fixed sets the position of an element in relation to the viewport. It is removed from the normal flow of the page and does not affect the flow of other elements. A fixed element always stays at the same position in the viewport and does not scroll with the other elements of the page.

Example:

.inner-box{
  position: fixed;
  top: 20px;
  left: 20px;
  height: 5rem;
  width: 10rem;
  background: orange;
  border: 1px solid black;
}

Output:

captured.gif

When we changed the position of the orange box to fixed and provided the top and left offset to it. It changed its position in relation to the viewport i.e. 20px away from the top and left and it always stays at that position.

1.5. sticky positioning

position: sticky works just like the position: fixed the only difference is that it always stays within the boundaries of its parent elements.

Example:

body{
  height: 200vh;
  display:grid;
  place-items: center;
}

.box{
  width: 20rem;
  height: 20rem;
  background: lightblue;
}

.inner-box{
  position: sticky;
  top: 200px;
  height: 5rem;
  width: 10rem;
  background: orange;
  border: 1px solid black;
}

Output:

captured (1).gif

As you can see the orange box behaves like a fixed and stays 200px away from the top until it touches the boundary of its parent element. After touching the boundary it scrolls up and down with its parent.

2. Conclusion

Positioning is not so hard to understand all it takes is a little understanding of how things work in CSS and with a little bit of practice, anyone can master the positioning in CSS.