Demystifying Position Property

The position property can take five values:

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

Before we jump in, let's understand in short what top, right, bottom, left, and z-index are.

• By default all these properties have value auto, and the element is placed in a Static Position.
• It accepts both negative and positive integer values and common units such as px, rem, em, % etc.

• The default value for z-index is 0, and will not work unless you apply position on the element (except static).
• Elements with a larger z-index value overlaps elements with smaller z-index value.
• It accepts positive and negative integers without any unit.

The code for the above example:

  div.static {
     position: static; /* Need not specify as this is default */
 }

But unlike static position, it accepts accepts values for top, right, bottom, left, and z-index.

• The element is then placed relative to itself depending on the values of top, right, bottom, left, and stacked in layers depending on the value of z-index.

In the example shown below, the blue colored div element with class relative has a relative position, with top and left offset values.

The code for the above example:

  div.relative {
     position: relative;
     top: 5em;
     left: 25%;
 }

In the example below, the blue colored div with class absolute is given a relative position, and no values of top, right, bottom, and left are specified.

See what happens when this blue box is given z-index: -1;

• The parent of this div.absolute is the section with class section and background-color: lightskyblue; has z-index: 0;.
• Since `z-index of section.section is greater than that of div.absolute, the div` is stacked below it's parent.

If no such ancestor is found, it is simply placed relative to the document.

• Check out the example below, and notice how the element is placed relative to the document.

The code for the above example:

  div.absolute-two {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 2em;
 }

Check out what happens, if we give the parent (or an ancestor) of an element with absolute position: position: relative;.

• Check the red colored div with a class absolute-three, and it's lightskyblue colored parent section with class section.
• Note how this time the absolute div.absolute-three is positioned relatively within the parent and not the document.

The code for the above example is:

  section.section {
     position: relative;
  }

  div.absolute-three{
     position: absolute;
     bottom: 0;
     right: 25%;
     height: 100px;
 }

• The main difference is that the position: fixed; element is not given space in the layout.

• Then, the ancestor behaves as the relative parent.

Check out the example below. The text div with blue background has a class fixed and position: fixed

The code for the above example is:

  div.fixed {
     position: fixed;
     top: 40vh;
     right: 25vw;
     left: 25vw;
 }

For e.g. look at the image below of a header.

• The header's parent is the document, and it's "sticky" within it. As you scroll and the header is 0 away from top, i.e. top: 0;, it becomes a fixed positioned element.

The code for the above example is:

  header.hero {
     position: sticky;
     top: 0;
 }

• In this scenario, the sticky positioned element (text with blue colored background) has a class of sticky.
• It's parent is the section with class section, and has a lightskyblue background.
• As you scroll down and div.sticky is 5px away from the top, it becomes a fixed element. Before that it remains as relatively positioned element.
• But there is a catch here. As the parent section.section scrolls away from the layout, so does the div with sticky position of. It no longer remains fixed, and now becomes relative again.

Hence the sticky (in particular fixed) behavior of an element remains only within it's closest positioned parent.

The code for the above example is:

  section.section{
     position: relative;
  }
  div.sticky {
     position: sticky;
     top: 5px;
  }

• These positions are also often used to stack items.
• The combination of absolute position within relative position is common, and is used to add styles such as shadows to elements.

• It could also be used in cases when you want to keep an element fixed on the page as long as the positioned parent/ ancestor is visible on the viewport.