CSS Positioning

CSS positioning is used to position an element on the web page.It has different positioning method that is used by element during positioning in 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 always positioned as per the normal flow of text.

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

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

Example

General Syntax

     .box {
   position: static;
   left: 150px;
   top: 150px;
}

Source Code

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

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 postition.After applying the following relative properties like top,bottom,right and left the box element will be shifted with repect to its normal position.

General Syntax

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

Source Code

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

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 viewport and does not ,move after page scroll.

General Syntax

     div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
}

Source Code

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

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 absolute positioned element nearest element does not position then it uses the document body and moves along with page scrolling.

General Syntax

     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

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

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

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS