Positioned Layout and Stacking

Intermediate

Positioning changes where a box is placed

Positioned layout is a coordinate-based part of CSS. The position property selects a positioning scheme, and inset properties such as top, right, bottom, left, and their logical counterparts provide offsets. The important first distinction is whether a box remains in normal flow, is visually offset from its flow position, or is removed from flow and positioned against a containing block.

.card { ?: relative; width: 240px; padding: 2rem; border: 2px solid; }
.badge { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; padding: 0.25rem 0.5rem; border: 1px solid; }

static is ordinary layout

position: static is the initial value. The box is laid out by its parent formatting context, and the inset properties do not apply. Static is therefore not an alternative coordinate system; it means ordinary participation in the relevant layout system.

?

relative offsets a box without removing its space

With position: relative, the box is first laid out as it would be in normal flow and then visually offset. Its original space remains reserved, so neighboring boxes are not reflowed around the shifted position. The offset can, however, contribute to an ancestor’s scrollable overflow.

?

absolute removes the box from normal flow

With position: absolute, the box is taken out of flow. It no longer contributes to the size or position of its siblings and ancestors through ordinary flow participation. Its position and size are resolved against an absolute-positioning containing block.

?

the containing block anchors absolute positioning

An absolutely positioned box is anchored by its absolute-positioning containing block. For a non-inline ancestor that establishes such a containing block, the reference rectangle is generally based on that ancestor’s padding edge. The nearest qualifying ancestor wins; if none exists, the initial containing block is used.

?

insets describe the position relative to the scheme

The physical top, right, bottom, and left properties and the flow-relative inset-block-start, inset-block-end, inset-inline-start, inset-inline-end properties describe offsets. The inset, inset-block, and inset-inline shorthands set groups of these values. Their reference depends on the positioning scheme: absolute uses the containing block, relative offsets from the box’s laid-out position, and sticky uses the relevant scrollport edges.

?

fixed positioning uses a fixed containing block

position: fixed is a form of absolute positioning whose box is attached to a fixed-positioning containing block. In continuous viewport-based media this is commonly the viewport, so the box can remain in place while the document scrolls. The exact containing-block behavior can be affected by other CSS features, so do not reduce fixed positioning to “always the viewport” as a universal rule.

?

sticky starts in flow and can become offset

position: sticky behaves like relative positioning until scrolling brings the box to a threshold defined by its inset properties. It then adjusts its position with reference to the nearest scroll container’s scrollport, while remaining constrained by its containing block. A useful sticky example therefore needs both a threshold such as top: 0 and a scroll situation in which the threshold can be reached.

?

positioning and overflow interact

Positioning and overflow are separate mechanisms that can interact. A positioned box may extend outside its containing box, and that overflow can be clipped or made scrollable by an ancestor’s overflow rules. Do not move overflow ownership into this lesson: Overflow owns clipping and scroll-container behavior; Positioned Layout owns how the positioned box gets placed.

?

z-index orders boxes within stacking contexts

z-index participates in stacking and painting order. The important mental model is not “the largest number wins globally.” Stacking contexts form nested painting groups. A descendant’s z-index is compared within its relevant stacking context; a child with a very large value cannot simply leap outside an ancestor stacking context that is painted below another context.

?

not every positioned box creates the same stacking context

Stacking-context creation depends on the property and value, not merely on the word “positioned.” The current Positioned Layout specification distinguishes fixed and sticky boxes from relative and absolute boxes when z-index is auto. Other CSS modules can also create stacking contexts, which is why stacking bugs should be debugged by identifying the actual context boundaries rather than blindly increasing numbers.

?

positioning does not replace a layout system

Absolute and fixed positioning are useful for overlays, badges, controls, and other coordinate-based pieces. They are not a replacement for normal flow, Flexbox, Grid, or other layout systems. Relative positioning also does not create a new layout algorithm: it offsets a box after its ordinary placement.

?

floats are not the same as positioned layout

Floats alter normal-flow layout and let inline content wrap around them; they are not one of the five values of the position property. Modern curriculum work should therefore avoid presenting floats as a positioning scheme. The Flow lesson owns their effect on normal flow, while this lesson stays focused on the position property, insets, containing blocks, and stacking.

a practical positioning diagnosis

Start with position. Then determine whether the box remains in flow. For absolute or fixed positioning, identify the containing block before inspecting offsets. For sticky positioning, identify the relevant scroll container and threshold inset. Finally, if the problem is visual overlap, inspect stacking contexts and painting order. This sequence prevents a common debugging failure: changing z-index when the real problem is the containing block, or changing position when the real problem is overflow.

?

what this lesson deliberately does not own

Box Model owns padding, borders, margins, and margin collapsing. Flow owns normal-flow participation. Sizing owns width, height, min/max constraints, intrinsic sizing, and box-sizing. Overflow owns clipping and scrolling. Flexbox and Grid own their layout algorithms. Anchor Positioning and other newer coordinate-based features remain separate later-stage curriculum owners. Keeping these boundaries explicit prevents one positioning lesson from becoming a duplicate of half the CSS curriculum.

?

Quick review

Remember the core chain: position selects the scheme; normal flow determines whether the box participates; the containing block or scrollport supplies the coordinate reference; inset properties provide offsets; and stacking contexts determine how overlapping boxes are painted. Use the dedicated layout, sizing, and overflow lessons when the question crosses those boundaries.

?