CSS Positioning Explained

CSS Positioning Explained

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 is always positioned as per the normal flow of text.

Example



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

Example

Source Code

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

Try it now

Source Code

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

Example


Try It Now

Source Code

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 postioning property, is positioned relative to its nearest positioned element i.e the nearest html element that has positioned like relative,fixed.

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

Example


Try It Now

Source Code

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