Position

Position (position for short) lets you place elements at the cardinal points in a stack or relative container.

Place elements on cardinal points easily

Just pick a position and place your element. No need to overthink or dive into CSS positioning complexities.

<div class="stack">
  <div class="pos-topleft"> Top left </div>
  <!-- ... other positions ... -->
</div>

TopLeft

Top

TopRight

Left

Center

Right

BottomLeft

Bottom

BottomRight

Full-width and full-height positions supported as well

Just add full to the pos class and you’ll get it.

Top full

Bottom full

Left Full

Right Full

Automatic perfect border radius calculation

pos lets you nudge an element towards the center. While nudging, pos can also calculate the perfect border radius without work on your part!

<div class="stack [--radius:1rem]">
  <div class="pos-topleft [--nudge:0.5em]"> Top left </div>
  <!-- ... other positions ... -->
</div>

Purrfect border radius!

TopLeft

Top

TopRight

Left

Right

BottomLeft

Bottom

BottomRight

Basic Usage

Two conditions must be met for pos to work flawleslly:

pos must be used in a stack or relative container.
When used in a stack, the stack-ing element must not have paddings.

<div class="stack">
  <div class="p-4"> Content </div>
  <div class="pos-topright">...</div>
</div>

<div class="relative p-4">
  <div> Content </div>
  <div class="pos-topright">...</div>
</div>

positions

Top positions

There are four top positions.

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

<div class="stack">
  <div class="pos-topleft">...</div>
  <div class="pos-top">...</div>
  <div class="pos-topright">...</div>
  <div class="pos-topfull">...</div>
</div>

<div class="relative">
  <div class="pos-topleft">...</div>
  <div class="pos-top">...</div>
  <div class="pos-topright">...</div>
  <div class="pos-topfull">...</div>
</div>

Bottom positions

There are four bottom positions.

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

<div class="stack">
  <div class="pos-bottomleft">...</div>
  <div class="pos-bottom">...</div>
  <div class="pos-bottomright">...</div>
  <div class="pos-bottomfull">...</div>
</div>

<div class="relative">
  <div class="pos-bottomleft">...</div>
  <div class="pos-bottom">...</div>
  <div class="pos-bottomright">...</div>
  <div class="pos-bottomfull">...</div>
</div>

Left positions

There are two left positions.

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

<div class="stack">
  <div class="pos-left">...</div>
  <div class="pos-leftfull">...</div>
</div>

<div class="relative">
  <div class="pos-left">...</div>
  <div class="pos-leftfull">...</div>
</div>

Right positions

There are two right positions.

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

<div class="stack">
  <div class="pos-right">...</div>
  <div class="pos-rightfull">...</div>
</div>

<div class="relative">
  <div class="pos-right">...</div>
  <div class="pos-rightfull">...</div>
</div>

Center position

You can center an element with pos-center.

<div class="stack">
  <div class="pos-center">...</div>
</div>

<div class="relative">
  <div class="pos-center">...</div>
</div>

Overlay position

To create an overlay:

In stack: Just add another element
In relative: Use pos-overlay on the element

<div class="stack">
  <div> ... </div>
  <div>Overlay</div>
</div>

<div class="relative">
  <div> ... </div>
  <div class="pos-overlay">Overlay</div>
</div>

Nudging

You can nudge elements towards the center with the --nudge variable. This is useful for pushing elements away from the edges of the container.

--nudge works for all positions except center.

<div class="stack">
  <div class="pos-topleft [--nudge:0.5rem]">Top left</div>
  <div class="pos-topright [--nudge:0.5rem]">Top right</div>
  <div class="pos-bottomleft [--nudge:0.5rem]">Bottom left</div>
  <div class="pos-bottomright [--nudge:0.5rem]">Bottom right</div>
  ...
</div>

<div class="relative">
  <div class="pos-topleft [--nudge:0.5rem]">Top left</div>
  <div class="pos-topright [--nudge:0.5rem]">Top right</div>
  <div class="pos-bottomleft [--nudge:0.5rem]">Bottom left</div>
  <div class="pos-bottomright [--nudge:0.5rem]">Bottom right</div>
  ...
</div>

You can also use the nudge, nudge-x, and nudge-y utility to control specifically how much you want to nudge.

<div class="stack">
  <div class="pos-topleft nudge-2">Top left</div>
  <div class="pos-topright nudge-2">Top right</div>
  <div class="pos-bottomleft nudge-2">Bottom left</div>
  <div class="pos-bottomright nudge-2">Bottom right</div>
</div>

<div class="relative">
  <div class="pos-topleft nudge-2">Top left</div>
  <div class="pos-topright nudge-2">Top right</div>
  <div class="pos-bottomleft nudge-2">Bottom left</div>
  <div class="pos-bottomright nudge-2">Bottom right</div>
</div>

Nested Radius Calculation

pos calculates the border-radius of your nudged element according to the border radius formula automatically.

innerRadius = outerRadius - marginOrPadding

For this to work, you need to specify your outer border radius with --radius. (You may also need to create a border for the wrapping element).

<!-- Adding radius to your outer element -->
<div class="stack [--radius:1rem]">
  <div class="pos-topleft [--nudge:0.5rem]">Top left</div>
  <div class="pos-topright [--nudge:0.5rem]">Top right</div>
  <div class="pos-bottomleft [--nudge:0.5rem]">Bottom left</div>
  <div class="pos-bottomright [--nudge:0.5rem]">Bottom right</div>
</div>

Custom Nested Radius

The border radius formula may not produce the best results in all circumstances. For example nudge may produce a nested border radius of 0 if the nudge value is larger than --radius.

Inner Border radius is 0. Not very nice.

Top left

Top right

Bottom left

Bottom right

In these circumstances, it may be better to specify a custom border radius for the nudged element instead. To do this, you will need to increase the specificity of your border radius declaration to at least [0,2,0] (2 classes).

If you use Tailwind, you can achieve this additional specificity by adding the !important modifier with !.

<div class="stack">
  <div class="pos-topleft [--nudge:0.5rem] !rounded-[0.25em]">Top left</div>
  <div class="pos-topright [--nudge:0.5rem] !rounded-[0.25em]">Top right</div>
  <div class="pos-bottomleft [--nudge:0.5rem] !rounded-[0.25em]">Bottom left</div>
  <div class="pos-bottomright [--nudge:0.5rem] !rounded-[0.25em]">Bottom right</div>
</div>

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

The CSS for pos is complex because we support both stack and relative containers.

/* For stack containers */
:where([class*='stack']) > {
  .pos-top { place-self: start center; }
  .pos-topleft { place-self: start start; }
  .pos-topright { place-self: start end; }
  .pos-topfull { place-self: start stretch; }
  .pos-bottomleft { place-self: end start; }
  .pos-bottom { place-self: end center; }
  .pos-bottomright { place-self: end end; }
  .pos-bottomfull { place-self: end stretch; }
  .pos-left { place-self: center start; }
  .pos-leftfull { place-self: stretch start; }
  .pos-right { place-self: center end; }
  .pos-rightfull { place-self: stretch end; }
  .pos-center { place-self: center center; }
  .pos-overlay {
    display: grid;
    > * {
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
    }
  }
}

/* For relative containers */
:where([class*='relative']) > & {
  .pos-top {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    width: fit-content;
    margin-inline: auto;
  }

  .pos-topleft {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
  }

  .pos-topright {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  .pos-topfull {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
  }

  .pos-bottom {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    width: fit-content;
    margin-inline: auto;
  }

  .pos-bottomleft {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
  }

  .pos-bottomright {
    position: absolute;
    inset-block-end: 0;
    inset-inline-end: 0;
  }

  .pos-bottomfull {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
  }

  .pos-left {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    height: fit-content;
    margin-block: auto;
  }

  .pos-leftfull {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
  }

  .pos-right {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    height: fit-content;
    margin-block: auto;
  }

  .pos-rightfull {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
  }

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

  .pos-overlay {
    position: absolute;
    inset: 0;
  }
}

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.

Pos class modifiers

Class	Description
`pos-topleft`	Place content at the top left corner
`pos-top`	Place content at the top
`pos-topright`	Place content at the top right corner
`pos-topfull`	Place content at the top, spanning the full width
`pos-left`	Place content at the left
`pos-bottomleft`	Place content at the bottom left corner
`pos-bottom`	Place content at the bottom
`pos-bottomright`	Place content at the bottom right corner
`pos-bottomfull`	Place content at the bottom, spanning the full width
`pos-leftfull`	Place content at the left, spanning the full height
`pos-right`	Place content at the right
`pos-rightfull`	Place content at the right, spanning the full height
`pos-center`	Place content at the center.
`pos-overlay`	Creates an overlay.

CSS Variables

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

Please purchase a license to view this content

This content is part of our premium documentation. To access it, you'll need to have an active license for one of these products.

Get Layouts Get Basic Get Pro

If you already have a license, please login to access this content.