Fixed

Fixed uses position:fixed to place elements on the corners of the stacking context (usually the viewport).

Fixed position made easy

Use Fixed- a corner and you’ll get an element with fixed position on that side.

<div class="Stack">
  <div class="Fixed-topleft"> Top left </div>
  <!-- ... other positions ... -->
</div>

TopLeft

TopRight

BtmLeft

BtmRight

Text rotation not included. Rotate text with Writing

Supports full-width and full-height fixed positions

Instead of specifying a corner, you just specify a side with Fixed-*.

<div class="Fixed-top"> Top </div>
  <!-- ... other positions ... -->
</div>

Top

Bottom

Left

Right

Overlays and Centering made easy as well

Just use Fixed-overlay or Fixed-center to get these two layouts. Is there anything esaier than this?

<div class="Fixed-overlay"> Overlay </div>
<div class="Fixed-center"> Center </div>

Overlay

Center

Nudge elements towards the center easily

If you use --nudge, you will move all fixed elements towards the center of the container.

<div class="Stack">
  <div class="Fixed-topleft [--nudge:0.5rem]"> Top left </div>
  <!-- ... other positions ... -->
</div>

TopLeft

TopRight

BtmLeft

BtmRight

Basic Usage

Fixed lets you place elements relative to the sides of a stacking context (usually the viewport).

To use Fixed, just choose one of the directional classes and apply it to the element.

<div class="Fixed-topright">...</div>

Fixed Positions

Top positions

There are three top positions.

Fixed-topleft: Place content at the top left
Fixed-top: Place content at the top, spanning the full width
Fixed-topright: Place content at the top right

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

<div class="Fixed-top">top</div>

Bottom positions

There are three 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

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

<div class="Fixed-bottom">Bottom</div>

Left positions

There are three left positions.

Fixed-lefttop: Place content at the left top
Fixed-left: Place content at the left, spanning the full height
Fixed-leftbottom: Place content at the left bottom

<div class="Fixed-lefttop">Left top </div>
<div class="Fixed-leftbottom">Left bottom </div>

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

Right positions

There are three right positions.

Fixed-righttop: Place content at the right top
Fixed-right: Place content at the right, spanning the full height
Fixed-rightbottom: Place content at the right bottom

<div class="Fixed-righttop">Right top </div>
<div class="Fixed-rightbottom">Right bottom </div>

<div class="Fixed-right">Right</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>

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

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));
}

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Sticky

Modifiers

Class	Description
`Fixed-topleft`	Place content at the top left corner
`Fixed-top`	Place content at the top, spanning the full width
`Fixed-topright`	Place content at the top right corner
`Fixed-bottomleft`	Place content at the bottom left corner
`Fixed-bottom`	Place content at the bottom, spanning the full width
`Fixed-bottomright`	Place content at the bottom right corner
`Fixed-lefttop`	Place content at the left top corner
`Fixed-left`	Place content at the left, spanning the full height
`Fixed-leftbottom`	Place content at the left bottom corner
`Fixed-righttop`	Place content at the right top corner
`Fixed-right`	Place content at the right, spanning the full height
`Fixed-rightbottom`	Place content at the right bottom corner
`Fixed-overlay`	Creates an overlay
`Fixed-center`	Place content in the center of the overlay

CSS Variables

Variable	Default	Description
`--nudge`	`0`	Amount to push towards the center on both block and inline axis
`--nudge-x`	`0`	Amount to push towards the center on the inline axis
`--nudge-y`	`0`	Amount to push towards the center on the block axis

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.