How CSS Position Properties work?

Position properties in CSS

Position is an essential CSS property for control the positioning of layout elements.

Static Position

All the HTML elements are always positioned to the normal flow of web page. Simply we can tell like default position.

Relative Position

An element with relative CSS property is always positioned relative to its normal (existing) position.

CSS relative position

Absolute Position

An element with absolute CSS property is always positioned relative to its parent element which has relative property.

CSS absolute position

If no parent element which has position property, it is always positioned relative to the document body. When page is scrolled, absolute element will move along with page scrolling.

CSS absolute position demo

Fixed Position

An element with fixed CSS property is always positioned relative to the viewport, it means it stays in the same position even if the page is scrolled.

CSS fixed position

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *