CSS Position Explained

CSS Position Explained

This blog article explains the CSS position property, covering static, sticky, relative, absolute, and fixed positioning. Learn how to position elements on a webpage in order to create advanced layouts.

1. Static
The default position; the element will be positioned according to the normal flow of the document.

2. Relative
The element will be positioned relative to its normal position, with left and top properties specifying the offset from that position.

3. Absolute
The element will be positioned absolutely, with respect to the nearest positioned ancestor (i.e., the nearest ancestor that is not static). If there is no such ancestor, it will be positioned relative to the document's body.

4. Fixed
The element will be positioned fixed with respect to the viewport, meaning it will stay in the same place even if the page is scrolled.

5. Sticky
The element will be positioned according to the normal flow of the document, but will stick to its nearest ancestor that has a non-static position once that ancestor reaches a certain scroll position.

6. Initial
Sets this property to its default value.

7. Inherit
Inherits this property from its parent element

Leave a comment

All comments are moderated before being published.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.