What are Positions in CSS?

The CSS position property defines the position of an element in a document. This property works with the left, right, top, bottom, and z-index properties to determine the final position of an element on a page.

Types of values of the Position property:

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

Let's have a look at each one by one.

1. Static

This is the default value for elements. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect.

Let's have a look at an example of position: static

HTML

<div id="container">
    <!-- Boxes -->
    <div class="box red"></div>
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box yellow"></div>
</div>

CSS

.box {
  display: flex;
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  color: white;
}

.red {
  background-color: #FF0000;
  position: static;
}
.blue {
  background-color: #0E56B4;
  position: static;
}
.green {
  background-color: #47F347;
  position: static;
}

.yellow {
  background-color: #ffea11;
  position: static;
}

In the above example, we have applied position: static to all the squares.

2. Relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if the position were static.

As penned below. When you give a relative position to an element, nothing changes until you add at least one of the left, right, top or bottom properties to the element.

Let's have a look at an example of position: relative

HTML

<div class="container">
      <!-- Boxes -->
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
 </div>

CSS

.div1, .div2, .div3{
  width: 100px;
  height: 100px;
  position: relative;
}
.div1{
  background: #FF0000;
   top: 50px;
  left: 50px;
}
.div2{
  background: #ffea11;
}
.div3{
  background: #47F347;
}

Here, we need to add at least one property to make the relative property work. Hence, we have added top and left so that the relative property can work properly.
Setting the top, right, bottom, and left properties of a relatively positioned element will cause it to be adjusted away from its normal 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.
Let's have a look at an example of position: absolute

HTML

<div class="container">
      <!--Boxes-->
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
</div>

CSS

.div1, .div2, .div3{
  width: 100px;
  height: 100px;
}
.div1{
  background: #FF0000;
  position: absolute;
  right: 50px;
}
.div2{
  background: #ffea11;
}
.div3{
  background: #47F347;
}

Check the above result. Now your Red Box i.e. div1 has an absolute position inside the container. Also, the Yellow Box i.e. div2 has moved to the place where the red box was placed.

4. Fixed

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 the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none, in which case that ancestor behaves as the containing block. Its final position is determined by the values of top, right, bottom, and left.
Let's have a look at an example of position: fixed

HTML

<div class="container">
      <div class="div1"></div>
      <div class="div2"></div>
      <div class="div3"></div>
      <p>Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, CSS3. However, CSS4 has never become an official version.</p>

  </div>

CSS

.div1, .div2, .div3{
  width: 100px;
  height: 100px;
}
.div1{
  background: #FF0000;
  top: 50px;
  left: 50px;
  position: fixed;
}
.div2{
  background: #ffea11;
}
.div3{
  background: #47F347;
}

Here in the fixed position, we can find from the above example that the red box is fixed at a certain place and is not changing its place which scrolling i.e. Fixed

5. Sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block, including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
Let's have a look at an example of position: sticky

HTML

  <div class="container">
      <div class="div1"></div>
    <div class="sticky"><b>I will Stick to my Position Itself</b></div>
      <div class="div2"></div>
      <div class="div3"></div>
         <p>Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
CSS is among the core languages of the open web and is standardized across Web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, CSS3. However, CSS4 has never become an official version.</p>
  </div>

CSS

.div1, .div2, .div3{
  width: 100px;
  height: 100px;
}
.sticky{
  height: 120px;
  background: black;
  color: white;
  position: sticky;
  top: 70px;
}
.div1{
  background: #FF0000;
}
.div2{
  background: #ffea11;
}
.div3{
  background: #47F347;
}

Here, the element is in a relative position until and unless you scroll to a point in the viewport where the element has a distance of 70px from the top, thereafter it becomes fixed.

I hope you must have got an idea about the CSS Positions.
Till then Keep Learning, Keep Exploring💫