CSS Positioning - Basic guide to position elements for better styling.

Do you face problems positioning your HTML elements in the proper order? Does that make your web-page look ugly and off-track? Well here's the solution. CSS has position property which helps to position HTML elements in the right manner by manipulating the location of that element.

Values of the position property are:

• Relative
• Absolute
• Static
• Fixed
• Sticky

Lets discuss them:

1. Relative:

An element with relative position is positioned, relative to its original position based on the values of top, right, bottom and left. No other element's position is affected by the element with relative position.

Example:

2. Absolute

An element with absolute position is positioned, relative to its nearest ancestor. If there is no nearest positioned ancestor, then it is positioned according to the document. Parent element behaves as if there is no child element, when the child element is positioned absolute. Thus, after applying left, right or bottom values, we see the child element moves according to the document and not it's parent.

Example:

3. Static

Every HTML element are positioned static by default. Thus, it follows the page flow and do not get affected by left, right, bottom, top or z-index.

Example:

4. Fixed

An element with fixed position is positioned relative to the document but it is unaffected by scrolling. Top, right, left and bottom are used to position the element.

Example:

5. Sticky

An element with sticky position is positioned according to the normal flow of the document and then, relative to its closest scrolling ancestor and nearest block level ancestor based on the values - top, bottom, right, left.

Example:

That's all from my side. Happy positioning.

References: MDN W3 Schools