What is position property

The position property specifies the type of positioning method used for an element. Position property basically helps in positioning of the element by doing certain adjustments which make designing the page easier.

The other properties which is useful to make positioning better and do adjustments/manipulations is top, right, bottom, left which are used with some position property.

However these properties will not work unless the position property has been used or set first.

 . box {
   display: static | relative | absolute | fixed | sticky;
 }

// static: default position property

Type of Positions

• Static
• Relative
• Absolute
• Fixed
• Sticky

Lets try to understand each type of property.

HTML used for example

<div class="box-container">
        <div class="box" id="box1">One</div>
        <div class="box" id="box2">Two</div>
        <div class="box" id="box3">Three</div>
        <div class="box" id="box4">Four</div>
    </div>

Static

• This is the default property. Every element has this property by default.
• Even if you don't mentioned the position property as "static" it would take it by default.
• Flow of the element in document flow is whatever comes in it, it will get placed on document.
• So basically an element which has positioned with static, takes the normal flow.
• This element does not have effect with top, bottom, left, right property.

Below examples gives the glimpse of the position property where even position as static is not mentioned it will take a static position

HTML

    <div class="box-container">
        <div class="box" id="box1">One</div>
        <div class="box" id="box2">Two</div>
        <div class="box" id="box3">Three</div>
        <div class="box" id="box4">Four</div>
    </div>

CSS

.box {
    width: 100px;
    height: 100px;
    background: blue;
    color: white;
    border: 1px;
    margin: 10px;
    text-align: center;
}

#box2 {
     background: green;
}

Result:

Relative

• It is same as static element and does the same thing which static element does.
• Only difference is we can use 4 properties called top, left, bottom ,right with position property which cannot be used with static as there well be no effect in case of static.
• Element with position: relative is position relative to itself i.e relative to its normal position.
• Element with position: relative can be taken out of document flow/normal flow.

CSS

.box {
     width: 100px;
      height: 100px;
      background: blue;
      color: white;
      border: 1px;
      margin: 10px
  }        

#box2 {
      position: relative;
      top: 20px;
      left: 20px;
      background: green;
  }

Result:

Absolute

• Works similar to Relative position but closely with parent elements which are position related to relative.
• Document ignores the element defined with absolute position and it completely removed the element from the document/normal flow.
• We can also use top, bottom, right, left property with Absolute position property.
• Absolute element is position relative to the parent which has relative property and if that is missing it will fall to next relative element or failing to to do so will consider directly the root element as relative element.

Examples:

• Element having position:absolute where parent is the html element.

• Element having position:absolute where parent is the element which has relative position.

Fixed

• As name suggest the element position with fixed will stay on the same place when scrolling.
• Fixed positioned element works very similar to absolute position but only difference it consider it ancestors as HTML element and totally ignore the parent element which is relative.
• Fixed positioned is based on HTML element in short and it has nothing to do with its parent.

Example

Below is codepen snippet

• Where box two which is green color has position: fixed and top: 20px and right: 30px. which will place box two at 20px from top and 30px from right and even if you scroll the page it will fixed on the page

Sticky

• Combination of position: relative and position: sticky
• By default, it works as relative.
• When scrolled outside page, it become fixed based on top, bottom, right, left property.
• In short, it behaves until a declared point/threshold like position:relative after that it is changed to position: fixed.

Example:

Below is codepen snippet

• Where box two which is green color has position: sticky and top: 0px.
• Box two will behave like relative and if you scroll to top, box2 element will fixed at top position because it has top: 0px.

Conclusion

I really hope this article helped you understand the CSS position property and how it works.

As this is my first blog, please let us know the feedback. Please like it and share if you feel this blog has helped you to get some knowledge about CSS positions.