Position property in CSS

Introduction

Each HTML element occupies a specific spot in the viewport of a browser. The region of the browser window known as the viewport is where web content is shown.

The HTML elements are typically rendered sequentially in the viewport by default in the browser. Depending on the type of element, the ordering may be either horizontal or vertical.

The location of an HTML element within the viewport is specified by the CSS position attribute. To place the items in the viewport, the position property is combined with the left, right, top, bottom, and z-index attributes.

CSS Position Property

The position of an element within a document is specified via the CSS position attribute. The final position of an element on a page is determined by this attribute in conjunction with the left, right, top, bottom, and z-index properties.

The position property has five possible values. As follows:

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

Also Read Selectors in CSS

Static

By default, all HTML components are static in position. When using static placement, the pieces follow the document’s natural flow. The items that are positioned as static are unaffected by the properties left, right, top, bottom, and z-index.

Example:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

div {
    width: 120px;
    height: 80px;
    display: inline-block;
}
.red {
    background-color: red;
}

.blue {
    background-color: blue;
}
.green {
    background-color: green;
    position: static;
    left: 100px;
}

Output Explanation

The green div’s left attribute is set to 100 pixels, yet it has no effect on where it appears in the viewport.

Relative

Relative positioning places the pieces following the document’s natural flow. However, in contrast to static elements, the relative elements’ positions can be changed using the left, right, top, bottom, and z-index properties.

Example:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

div {
    width: 120px;
    height: 80px;
    display: inline-block;
}
.red {
    background-color: red;
}
.green {
    background-color: green;
    position: relative;
    top: 50px;
}
.blue {
    background-color: blue;
}

Output Explanation

The green div has been shifted 50 pixels from the top, as can be seen. The red and blue divs are separated by a space. This is so that the element’s default position is not altered by the relative placement. The element is instead moved to the requested location, leaving the default location empty.

Absolute

Absolute positioning is used to place the elements in relation to their parent elements. With any position property other than static, the absolute elements are positioned in relation to the nearest ancestor. The element is positioned relative to the next parent element without the static position attribute if the nearest ancestor has that property.

Example:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

div {
    width: 80px;
    height: 80px;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
    position: absolute;
    left: 88px;
}

.blue {
     background-color: blue;
}

Output Explanation

The green div is situated 88 pixels to the left, as can be seen. But unlike relative elements, the absolute element is shifted to the new position rather than remaining in its original location. As a result, the following element has taken its former position. It is the blue div in this instance.

Fixed

Fixed positioning elements are always positioned in relation to the HTML element, or the document’s root. Regardless of scrolling, the fixed items maintain their location. Like absolute elements, fixed elements are likewise taken out of the document’s natural flow and replaced with other elements.

Example:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

div {
    width: 120px;
    height: 80px;
    display: inline-block;
}
.red {
  background-color: red;
}

.green {
  background-color: green;
  position: fixed;
  left: 256px;
}

.blue {
  background-color: blue;
}

Output Explanation

We can see that the blue div replaces the green div, which is situated 256 pixels from the left. As a result, the sequence altered from red => green => blue to red => blue => green.

Sticky

When an element is positioned using sticky positioning, it behaves like a relative position up until a specific scroll point, at which time it becomes fixed.

Example:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

div {
    width: 120px;
    height: 80px;
    display: inline-block;
}
body{
  height:800px;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
  position: sticky;
  top: 50px;
}
.blue {
  background-color: blue;
}

Output Explanation

The green div scrolls a little bit before being fixed, and the red and, blue div then resumes scrolling.

Z-index Property

The order of overlapping HTML elements is determined by the z-index property. A greater z-index value will cause elements to be positioned above elements with a lower z-index value. Only positioned items can make use of the z-index property (relative, absolute, fixed, and static). The elements with position: static is unaffected by the z-index.

Example:

<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>

div {
  width: 80px;
  height: 80px;
}
body{
  height:800px;
}
.red {
  background-color: red;
  position: absolute;
  z-index: -1;
  left: 60px;
}
.green {
  background-color: green;
  position: absolute;
  z-index: 1;
  left: 30px;
}
.blue {
  background-color: blue;
  position: absolute;
  z-index: 2;
}

How to use this property?

An integer value can be used to set the z-index value. A higher-value element will be positioned on top of a lower-value element.

Conclusion

1. An HTML element’s position within the browser’s viewport is determined by the CSS position attribute.
2. Any of the following values can be used for the CSS position property: static, relative, absolute, fixed, and sticky.
3. HTML elements are placed in a static position by default, which keeps the document’s natural flow in mind.
4. The relative placement follows the document’s natural flow, although the position can be changed using the z-index, left, right, top, and bottom indices.
5. With any position property other than static, absolute positioning makes an element relative to its parent.
6. Fixed placement constantly places an element in relation to the root of the document, or the HTML element.
7. When an element is positioned using sticky positioning, it behaves like a relative position up until a specific scroll point, at which time it becomes fixed.
8. The order of overlapping HTML elements is determined by the z-index property.

In this article, we learned about the Position property in CSS, i.e. Static, Relative, Absolute, Fixed, and Sticky. We also got to know about the Z-index property. 

Hope this article helps you in understanding the Position property in CSS.