CSS Positions

The CSS position property defines how an element in HTML is positioned in a document. The HTML element position can be manipulate by using these properties top , right , bottom , and left determine the final location of positioned elements in document.

                  
                  /* position example */
                  .elementPosition {
                  position: absolute;
                  top: 10px;
                  }
                  
                  

Now, in above code absolute positioned element will move down from the top by 10px from its parent element or document body.

#Values of position

1. static:

2. relative:

3. absolute:

4. fixed:

5. sticky:

#css position static

static: By default every element has a static position, So if the element has defined with static value then there will be no effect on position of that element. Even if there is any use of left/right/top/bottom/z-index properties there will be no effect on that element.

(Code of above example given below)

                    
<div 
style="border-width:3px;border-style:solid;
position:static;width: auto;height: 200px;">
This &lt;div&gt; element has position: static;</div>
                    
                  

#css position absolute

position: absolute; will positioned an element relative to the nearest position of its parent element. If there is no parent element of absolute positioned element then it uses the document body.

(Code of above example given below)

                    
<div style="
  border-width: 3px;
  border-style: solid;
  position: relative;
  width: auto;
  height: 200px;
">
This &lt;div&gt; is parent element.
  <div style="
      border-width: 3px;
      border-style: solid;
      position: absolute;  /* position value absolute*/
      top: 80px;
      right: 2px;
      width: 200px;
      height: 100px;
    ">
    This &lt;div&gt; element has position: absolute;
  </div>
</div>
                    
                  

#css position relative

relative: as we know that if any element declare with static value then there will be no change to its original position. But if element declare with relative value, then left/right/top/bottom/z-index will work. The positional properties will move the element from the original position in that direction.

(Code of above example given below)

                    
<div style="
  border-width: 3px;
  border-style: solid;
  position: relative;
  width: auto;
  height: 200px;
">
This &lt;div&gt; is parent element.
  <div style="
      border-width: 3px;
      border-style: solid;
      position: relative;   /* position value relative*/
      top: 40px;
      left: 50px;
      width: 200px;
      height: 100px;
    ">
    This &lt;div&gt; element has position: relative;
  </div>
</div>
                    
                  

#css position fixed

fixed: the element will removed from its original position of the document. Its just like absolutely positioned elements. Only fixed positioned elements are always relative to its document, not to any particular parent, and also they are unaffected by scrolling.

                    
      element {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        z-index: 1;
      }
                    
                  

#css position sticky

sticky: the element is positioned based on the user's scroll position. A sticky element will toggle between relative and fixed value. It defines at which point the element takes a fixed position where it is told to stick.

position: sticky; is used to positioned element based on the user's scroll.