CSS Positioning

CSS positioning is a technique used to control the layout and placement of elements on a webpage. There are several values for the position property that determine how an element is positioned within its container or the document flow.

CSS Position Property Values

This section will list all the properties of the position


Static (position: static;) Default Position

  • Elements are positioned according to the normal flow of the document.

  • Ignored top, bottom, left, right, and z-index properties.


Relative (position: relative;)

  • Positioned relative to its normal position.

  • Allows using top, bottom, left, and right properties to adjust the element’s position.

  • Doesn’t affect the layout of other elements.


Absolute (position: absolute;)

  • Positioned relative to its closest non-static parent element (or the document itself if no non-static parent)

  • Taken out of the normal flow, affecting the layout of other elements.

  • Use top, bottom, left, and right properties for positioning.


Fixed (position: fixed;)

  • Positioned relative to the browser window or viewport.

  • Remains fixed even when the page is scrolled.

  • Use top, bottom, left, and right properties for positioning.


Sticky (position: sticky;)

  • Initially positioned according to the normal flow.

  • Becomes fixed when it reaches a specified scroll position.

  • Sticks to a position within its container while scrolling.


CSS Top, Bottom, Left and Right

In CSS, the properties top, bottom, left, and right are used along with positioning properties (position: relative/absolute/fixed/sticky;) to precisely position elements within their containing element or relative to the viewport.


top

  • Used with positioned elements (relative, absolute, fixed, or sticky).

  • Specifies the distance an element’s top edge is offset from its normal position.

  • Positive values move the element down

  • Negative values move it up.


bottom

  • Used with positioned elements.

  • Specifies the distance an element’s bottom edge is offset from its normal position.

  • Positive values move the element up

  • Negative values move it down.


left

  • Used with positioned elements.

  • Specifies the distance an element’s left edge is offset from its normal position.

  • Positive values move the element to the right

  • Negative values move it to the left.


right

  • Used with positioned elements.

  • Specifies the distance an element’s right edge is offset from its normal position.

  • Positive values move the element to the left

  • Negative values move it to the right.


CSS z-index

The z-index property determines the stacking order of positioned elements (those with position: relative, position: absolute, position: fixed, or position: sticky).

CSS z-index

In CSS z-index

  • Controls the stacking order of elements along the z-axis (front-to-back order).

  • Numeric values or keywords (auto). auto, which means the stacking order is determined by the document order.

  • Elements with higher z-index values appear in front of elements with lower values.

Share