CSS Position

CSS Position Property

The CSS position property controls how an element is positioned and how offset properties can affect its location.

Elements are static by default and follow normal flow. Other position values can move an element relative to its normal position, position it relative to a containing block, attach it to the viewport, or keep it in view while its container scrolls.

Position Values

The position property has several commonly used values that determine how an element participates in layout and how its final position is calculated.

position: static

The static value is the initial value of the position property. The element follows normal document flow.

.box {
  position: static;
}

For a statically positioned element, the physical inset properties top, right, bottom, and left do not move the element.

Most elements do not need an explicit position: static declaration because this behavior is already the default.

position: relative

The relative value keeps an element in normal flow while allowing it to be visually offset from its normal position.

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

The element's original space remains reserved in the layout even though the element is visually shifted.

A relatively positioned element can also establish the containing block for absolutely positioned descendants.

position: absolute

The absolute value removes an element from normal flow. Other elements are laid out without reserving space for it.

.container {
  position: relative;
}
.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

In this example, the relatively positioned container establishes the containing block for the absolutely positioned badge. The badge is placed 10 pixels from the container's top and right edges.

This pattern is useful for badges, labels, icons, overlays, and other elements that need to be positioned within a specific component.

position: fixed

The fixed value removes an element from normal flow and normally positions it relative to the viewport.

.notice {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

The element normally remains in the same viewport location as the page scrolls.

Fixed positioning is often used for interface elements that need to remain available while scrolling. Care should be taken to prevent fixed content from covering important page content, especially on smaller screens.

position: sticky

The sticky value combines aspects of relative and fixed positioning. The element participates in normal flow but can remain at a specified offset as its scrolling container moves.

.section-heading {
  position: sticky;
  top: 0;
}

The top: 0 declaration provides the threshold used for the sticky behavior. As the content scrolls, the element can remain at the top of its scrolling area until the boundaries of its containing context are reached.

Sticky positioning is commonly used for section headings, table headers, and navigation that should remain visible during part of the scrolling experience.

Offset Properties

The physical inset properties top, right, bottom, and left specify offsets for positioned elements.

.box {
  position: absolute;
  top: 20px;
  right: 30px;
}

Which edge an offset is measured from depends on the positioned element's containing block.

CSS also provides logical inset properties such as inset-inline-start and inset-block-start, which adapt to the document's writing mode and text direction.

Positioning and the Containing Block

A positioned element's offsets are calculated relative to a containing block. Understanding which element establishes that containing block is especially important with absolute positioning.

.card {
  position: relative;
}
.card-label {
  position: absolute;
  top: 0;
  right: 0;
}

Here, the positioned .card establishes the containing block for the absolutely positioned .card-label. This keeps the label attached to the card instead of positioning it against a more distant ancestor.

This is why position: relative is frequently placed on a component even when the component itself does not need to be visually moved.

Overlapping Elements

Positioned elements can overlap other content, particularly when absolute or fixed positioning is used.

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

When overlapping elements need an explicit stacking order, the z-index property can help determine which element appears in front.

.badge {
  position: absolute;
  z-index: 2;
}

The next tutorial covers z-index, stacking order, and stacking contexts in greater detail.

CSS Position Example

The following example compares relative, absolute, and sticky positioning. Open the example in the editor and change the top, left, and right values to see how the positioned elements respond.

.relative-box {
  position: relative;
  left: 20px;
}
.container {
  position: relative;
}
.absolute-box {
  position: absolute;
  top: 10px;
  right: 10px;
}
.sticky-box {
  position: sticky;
  top: 0;
}