This module includes basic positioning utilities to alter the default document flow.
Use positions with caution. They are often unnecessary and commonly misused.
Use .relative
to create a new stacking context.
Button
Use .absolute
to move elements out of the default document flow.
Button Dropdown Action Action Action
Use .fixed
to position an element relative to the viewport.
Note: fixed positioning has been disabled here for demonstration only.
Button
Note: Fixed positioning is notoriously tricky to use well and can lead to inaccessible content and unwanted side effects. Use fixed positioning with caution.
To anchor to a particular side, use .top-0
, .right-0
, .bottom-0
, or .left-0
. Margin and padding utilities can be used to space elements apart.
Button
To fill an entire width or height, use opposing directions.
Fixed bar
To ensure the desired stacking order, use z-index utilities.
Fixed bar