Intro

fixed lets you place elements to the corners and sides of the viewport.

If you used new-stacking-context, fixed will be placed at the corners and sides of that stacking context instead.

Fixed Positions

Top positions

There are four top positions.

• fixed-topleft: Place content at the top left
• fixed-top: Place content at the top
• fixed-topright: Place content at the top right
• fixed-topfull: Place content at the top, spanning the full width

<div class="fixed-topleft"> Top left </div>
<div class="fixed-top"> Top </div>
<div class="fixed-topright"> Top right </div>

<div class="fixed-topfull">Top full</div>

Bottom positions

There are four bottom positions.

• fixed-bottomleft: Place content at the bottom left
• fixed-bottom: Place content at the bottom, spanning the full width
• fixed-bottomright: Place content at the bottom right
• fixed-bottomfull: Place content at the bottom, spanning the full width

<div class="fixed-bottomleft"> Bottom left </div>
<div class="fixed-bottom"> Bottom </div>
<div class="fixed-bottomright"> Bottom right </div>

<div class="fixed-bottomfull">Bottom full</div>

Left positions

There are two left positions.

• fixed-left: Place content at the left
• fixed-leftfull: Place content at the left, spanning the full height

<div class="fixed-left">Left </div>

<div class="fixed-leftfull">Left full </div>

Right positions

There are two right positions.

• fixed-right: Place content at the right
• fixed-rightfull: Place content at the right, spanning the full height

<div class="fixed-right">Right </div>

<div class="fixed-rightfull">Right full </div>

Center

You can use fixed-center to place an element in the center of the screen.

<div class="fixed-center">...</div>

Overlay

You can use fixed-overlay to create an overlay over the entire screen.

<div class="fixed-overlay">...</div>

Nudging

You can nudge any fixed element towards the center with --nudge. Unlike Pos, fixed does not calculate inner border radius when you --nudge.

<div class="fixed-topleft [--nudge:0.5rem]">...</div>
<div class="fixed-topright [--nudge:0.5rem]">...</div>
<div class="fixed-bottomleft [--nudge:0.5rem]">...</div>
<div class="fixed-bottomright [--nudge:0.5rem]">...</div>