Class Reference
Position
Class Reference
Position
Positioning, offsets, stacking order and image alignment.
How to use
Give an absolute element a position-relative ancestor. Fixed and sticky elements have different scroll behavior, and z-index must be considered alongside stacking contexts.
Responsive behavior
Positioning applies at all sizes unless a tablet or mobile variant is shown. Check smaller screens so positioned content does not cover controls or overflow the viewport.
Visual reference
Blue elements show the installed class behavior. Dashed outlines mark parent boundaries. Scroll interactive examples to see overflow, fixed, sticky, and anchor behavior.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
The same image uses cover in wide and narrow frames, so vertical and horizontal crop positions are visible.
Both examples receive top:16px and left:24px. Static ignores offsets; relative shifts visually while preserving its original space.
Both examples receive top:16px and left:24px. Static ignores offsets; relative shifts visually while preserving its original space.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
Scroll inside this miniature viewport. Fixed positioning stays pinned to its viewport.
Scroll inside the frame. A top: 0 offset is supplied so the sticky behavior is visible.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The preview supplies a 24px offset on this axis. This class resets it to auto, restoring the static-position reference.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The preview supplies a 24px offset on this axis. This class resets it to auto, restoring the static-position reference.
The preview supplies a 24px offset on this axis. This class resets it to auto, restoring the static-position reference.
The preview supplies a 24px offset on this axis. This class resets it to auto, restoring the static-position reference.
The preview supplies a 24px offset on this axis. This class resets it to auto, restoring the static-position reference.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The dashed frame is a positioned parent. The target uses this class; offsets are measured from the parent’s edges.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The two positioned elements overlap. The target uses this class; the reference always uses z-index:1.
The child has z-index:10. Isolate keeps that child inside its parent’s stacking context; auto allows it to overlap the outside sibling.
The child has z-index:10. Isolate keeps that child inside its parent’s stacking context; auto allows it to overlap the outside sibling.
Click Jump to target to see the class’s scroll margin. The reference header shows why an offset may be useful.
Click Jump to target to see the class’s scroll margin. The reference header shows why an offset may be useful.
Click Jump to target to see the class’s scroll margin. The reference header shows why an offset may be useful.
Click Jump to target to see the class’s scroll margin. The reference header shows why an offset may be useful.
Click Jump to target to see the class’s scroll margin. The reference header shows why an offset may be useful.