Fixed

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>

This is the CSS for Fixed.

[class*='Fixed'] {
  position: fixed;
}

// Consider changing this to nudging with margins...
// So top left right can be simpler
[class*='Fixed-top'] {
  top: var(--nudge-y, var(--nudge, 0));
  left: var(--nudge-x, var(--nudge, 0));
  right: var(--nudge-x, var(--nudge, 0));
}

.Fixed-topleft {
  right: auto;
}

.Fixed-topright {
  left: auto;
}

[class*='Fixed-bottom'] {
  bottom: var(--nudge-y, var(--nudge, 0));
  left: var(--nudge-x, var(--nudge, 0));
  right: var(--nudge-x, var(--nudge, 0));
}

.Fixed-bottomleft {
  right: auto;
}

.Fixed-bottomright {
  left: auto;
}

[class*='Fixed-left'] {
  top: var(--nudge-y, var(--nudge, 0));
  bottom: var(--nudge-y, var(--nudge, 0));
  left: var(--nudge-x, var(--nudge, 0));
}

.Fixed-lefttop {
  bottom: auto;
}

.Fixed-leftbottom {
  top: auto;
}

[class*='Fixed-right'] {
  top: var(--nudge-y, var(--nudge, 0));
  bottom: var(--nudge-y, var(--nudge, 0));
  right: var(--nudge-x, var(--nudge, 0));
}

.Fixed-righttop {
  bottom: auto;
}

.Fixed-rightbottom {
  top: auto;
}

.Fixed-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Fixed-overlay {
  pointer-events: none;
  display: grid;
  inset-block: var(--nudge-y, var(--nudge, 0));
  inset-inline: var(--nudge-x, var(--nudge, 0));
}

Fixed

Modifiers

CSS Variables