Questions tagged [css-position]

The position property in CSS allows you to control the location of an element. Next to the inherit value, there are four specific values it can be set to:

• static for positioning an element according to the "normal flow". This is the default and does not need to be set.

• relative for positioning similar to static, albeit with a specific offset relative to its normal position

• absolute for positioning elements along a coordinate system with respect to the element's "containing block"

• fixed for positioning elements using a coordinate system that is fixed to the origin of the display surface (usually the origin of the client area of the enclosing browser window)

• sticky for positioning an element as relative until a certain scrolling threshold has been reached, at which point the element is positioned as a fixed element.

CSS positioning often relies on additional layout properties (such as top, bottom, left, right, z-index, and clip) in order to achieve the desired outcome.

Example

/* static */
element {
  position: static;
}

/* relative */
element {
  position: relative;
  top: 65px; left: 65px;
}

/* absolute */
element {
  position: absolute;
  top: 40px; left: 40px;
}

/* sticky */
element {
  position: sticky;
  top: 20px;
}

References

1. Positioning Schemes - W3C Spec
2. CSS Position - MDN Link