Demystifying Position Property

CSS provides the position property that specifies how an element should appear in the document. This property is helpful when you want to position elements in the DOM outside of normal flow.

What is this blog post about?

This blog post covers the position property with the top, right, bottom, left, and z-index properties that determine the final position of an element.

Since this property has a notorious tendency to be misunderstood, let's try to figure out this property together!

Check out the demos I explained in this post here

Prerequisites for the blog

This blog post assumes that you are familiar with the syntax and basics of HMTL and CSS.

---

What is the CSS position property?

• The position property specifies how an element is placed in the DOM.
• Along with this, you can use top, right, bottom, and left properties that specify where the element is placed.

• 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.

• The top, right, bottom, and left, properties specify how far away from the top/ right/ bottom/ left and element should be positioned.
  • 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.

• z-index is used to specify the stack level, and layer elements.
  • 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.

---

1. Static

• position: static; is the default value of this property, and the elements appear in their normal flow in the document.
• Properties: top, right, bottom, left, and z-index have no effect on an element positioned static.
• Check the example below. The blue colored div with class static has a static position.

• The code for the above example:
  

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

Check out the codepen here:

2. Relative

• When position: relative; is applied to an element, it appears in the normal flow of the document.

• 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%;
   }
  

Check out the codepen here:

3. Absolute

• When position: absolute; is applied to an element, it is taken out of the the normal flow of the document.
• It remains in it's original position unless top, right, bottom, left values are specified.
• The other elements ignore the element, and behave as if it is not present at all.
• z-index can also be specified to stack and layer elements.

• 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.

• Typically an element with position: absolute; is placed relative to it's closest positioned ancestor (other than static).

• 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;
   }
  

Check out the final codepen here:

4. Fixed

• When position: fixed; is applied to an element, it is taken out of the the normal flow of the document similar to Absolute Position.
  • The main difference is that the position: fixed; element is not given space in the layout.
• The fixed element is not affected by scrolling, and remains in the specified position depending on the top, right, bottom, and left values.
• The positioned element is relative to the document except when it's ancestors have transform, perspective, or filter property applied with a value other than none.
  • 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;
   }
  

Check out the codepen here

5. Sticky

• When position: sticky; is applied to an element, it is positioned in the the normal flow of the document similar to Relative Position.
• But as the element is scrolled within the positioned ancestor, it becomes fixed once the offset value specified in top, right, bottom, and left properties are crossed.

• 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;
   }
  

• Let's deal with another scenario. But this time let's use an element that is positioned sticky within another positioned ancestor.
  • 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;
    }
  

Check the entire codepen here:

---

CONCLUSION

Phew! That was a lot. Wasn't it?

I understand that sometimes CSS can be overwhelming but trust me, as you practice the concepts become clearer.

The position property is very important, and comes in handy in various scenarios.

Check out the demos I explained in this post here

• The relative and absolute positions are often used, and mostly together when you have pseudo elements.
  • 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.
• The sticky position can be used for headers and navbar as shown in the example for Sticky above.
  • 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.

These are not the only available use cases of position property. I highly recommend you to practice and get your hands dirty to understand these concepts in depth.

---

Thank you so much for reading this post!

This was my final blog post on CSS. In the coming posts, I will focus on JavaScript and try to explain few vital concepts.

If you liked this post then please help me out giving it a heart, unicorn or a pin!
Do share it among your dev friends, and comment down what you feel!

---

RESOURCES:

• Absolute and Relative Position Explained by Kevin Powell
• Practical Examples of Absolute Position by Kevin Powell
• Things you can do with Position Sticky by Kevin Powell
• CSS Position MDN docs