position
Control how an element participates in flow and responds to offsets.
Overview
| Class | Declarations |
|---|---|
rel | position: relative;
|
abs | position: absolute;
|
static | position: static;
|
fixed | position: fixed;
|
sticky | position: sticky;
|
position:<type> | position: <type>;
|
Examples
Positioning elements as static
static keeps an element in normal flow. Insets such as top:* and left:* have no effect on a static box. Most elements use this position by default.
<div class="w:8rem"> <div class="static left:1.25rem top:1.25rem h:4rem">Target</div></div><div class="h:4rem w:8rem mt-lg">Next in flow</div>Positioning elements as relative
rel offsets a box from its normal position while preserving its original space. The following box stays where normal flow placed it, even when the shifted target overlaps that space.
<div class="w:8rem"> <div class="rel left:1.25rem top:1.25rem h:4rem">Target</div></div><div class="h:4rem w:8rem mt-lg">Next in flow</div>Positioning elements as absolute
abs removes a box from normal flow. Here, the rel parent supplies its containing block, so top-md and right-md measure from that parent. Other features, including transforms and certain containment values, can also establish a containing block.
<div class="rel h:10rem"> <div class="abs right-md top-md h:4rem w:8rem">Target</div></div>Positioning elements as fixed
fixed removes a box from normal flow and usually anchors it to the viewport. Scroll this preview: the search field stays at the top while the collection moves underneath. Its containing viewport is the preview iframe.
<div class="pt-3xl"> <input type="search" aria-label="Filter assets" placeholder="Filter assets" class="fixed left-md top-md z:1 w:calc(100%-2rem)"> <div class="h:40rem">Scrollable collection</div></div>An ancestor with a transform or a suitable containment value can establish a fixed-position containing block. In that case, the box is attached to that ancestor instead of the viewport.
Positioning elements as sticky
sticky retains its space in flow, then adjusts its position to stay inside the nearest scrollport. Set an inset on the scrolling axis and give the container enough overflow to scroll. The sticky box remains constrained by its containing block.
<div class="overflow:auto h:15rem" tabindex="0" aria-label="Scrollable asset list"> <div class="h:4rem">Scroll down</div> <div class="sticky top z:1">Pinned collection</div> <div class="h:35rem">Scrollable collection</div></div>Apply conditionally
Use selectors and conditional queries to change the behavior when a state or viewport condition applies. Focus the target with Tab, or widen the preview to sm, to move it from normal flow to the bottom-right corner.
<div class="rel h:10rem"> <div tabindex="0" class="static bottom-md right-md h:4rem w:8rem abs:focus-visible abs@sm"> Focus with Tab </div></div>