Position Property in CSS

HTML is not capable to set position of HML element that's why we use the css position property to define the position of HTML element in a document . This property works with the left, right, top, bottom and z-index properties to determine the final position on a page.

1. static

2. relative

3. absolute

4. fixed

static:

This is the default for element. The HTML element are positioned static by default. Left, right, top, bottom and z-index properties will not work.

relative:

Element with position relative is positioned to its normal position. Based on the value of left, right, top and bottom properties, is applied to the element relative to itself.

<div class="big ">
      Big
      <div class="one">One</div>
      <div class="two">Two</div>
      <div class="three">Three</div>
    </div>

<style>

.one {
        position: relative; 
        top: 85px;  
        left: 25px; 
       }

</style>

absolute:

Element with position absolute are position to its first positioned (not static) ancestor element. If the element has no positioned ancestors it use the document body.

<style>

.big {
         position: relative;
        } 

.one {
        position: absolute; 
        top: 85px;  
        left: 25px; 
       }
</style>

fixed:

Element with position fixed are not affected by scrolling. They always stay in the same position on the page. Left, right, top, bottom properties will work.

<style>

.big {
        height: 200vh;
        }

.one {
        position: fixed; 
        top: 85px;  
        left: 25px; 
       }

</style>