CSS Positioning

CSS positioning is used to position an element on the web page. It has a different positioning method that is used by elements during positioning on the web page.These positioning methods are static, relative, fixed, absolute or sticky.

CSS Positioning Property

Followings are the positioning properties: static, relative, fixed, absolute, sticky

CSS Static Positioning

This is the default positioning of the HTML element and it is not affected by the top, bottom, left, right, and z-index properties. It is always positioned as per the normal flow of text.

       
   .box{
          padding: 20px;
          background: #7dc765;
      }

The CSS position property is used to place the element left,right,top,bottom from its normal position.

Example

Source Code

          div{
  padding: 20px;
  background: #7dc765;
}
.box{
  position: static;
  left: 150px;
  top: 150px;
}

Try it now

Code Explanation

Note:In this example,CSS position:static property is used.Please keep in mind that this property is applied by default on the element.The left,right,top,bottom property can not work with static property of position.

Relative Position

A relative positioned element is positioned itself relative to its normal position. After applying the following relative properties like top,bottom,right and left the box element will be shifted with respect to its normal position.

General Syntax

      .box {
  position: relative;
  left: 100px;
}

Try it now

Source Code

          .ext_box {
  border: 2px solid #00c292;
  width: 100%;
  height: auto;
}
.box {
  width: 250px;
  height: 200px;
  background-color: orange;
  margin-bottom: 20px;
}
.box--extend {
  position: relative;
  top: 150 px;
  left: 150px;
}

Try it now

Code Explanation

Note:In this example,CSS relative property of the position is used.After applying CSS relative property,the element can be shifted from its normal position after providing left,right,bottom & top property value.

Fixed Positioning

Assigning position: fixed; to the HTML element then it will be fixed with respect to the viewport and does not , move after page scroll.

       
  
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
   
  

Source Code

          div.fixed{
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100px;
  border: 2px solid #73ad41;
}

Try it now

Code Explanation

Note:In this example,CSS fixed property of the position has been used.After applying CSS fixed property,the element can not move after page scroll.

Absolute Positioning

An element having absolute positioning property is positioned relative to its nearest positioned element i.e the nearest HTML element that has positioned like a relative, fixed.

However if an absolutely positioned element nearest element does not position then it uses the document body and moves along with page scrolling.

       
      div.relative {
      position: relative;
      width: 400px;
      height: 200px;
      border: 3px solid #73AD21;
    }

    div.absolute {
      position: absolute;
      top: 80px;
      right: 0;
      border: 2px solid #73AD51;
      width: 100px;
      height: 100px;
    }
   
  

Source Code

          .relative {
  position: relative;
  border: 2px solid #73ad21;
  padding: 10px;
}
.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  border: 2px solid #73ad51;
  width: 150px;
  height: 100px;
  background-color: blue;
  color: white;
  padding: 10px;
}

Try it now

Code Explanation

Note:In this example, the CSS absolute property of the position has been used. After applying CSS absolute property, the element is positioned relative to its nearest positioned element.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4