Position

Position (Pos 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.

<div class="Stack">
  <div class="Pos-topfull"> Top full </div>
  <!-- ... other positions ... -->
</div>

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 also calculates the perfect border radius without work on your part!

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

Purrrrfect border radius!

TopLeft

Top

TopRight

Left

Right

BottomLeft

Bottom

BottomRight

Basic Usage

Pos must be used in a Stack or Relative container. If you use Tailwind, relative works too.

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

<div class="Stack">
  <div class="Content">...</div>
  <div class="Pos-topright">...</div>
</div>

<div class="Relative">
  <div class="Content">...</div>
  <div class="Pos-topright">...</div>
</div>

<div class="relative">
  <div class="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>

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>

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>

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>

Center Position

You can center an element with Pos-center.

<div class="Stack">
  <div class="Pos-center">...</div>
</div>

Overlay Position

Although you can create an overlay with Pos-overlay, you’re essentially stacking more elements on top of each other. So we would recommending just adding another element in Stack instead.

The only time you need Pos-overlay is if the container is Relative.

<div class="Relative">
  <div> ... </div>
  <div class="Pos-overlay">Overlay</div>
</div>

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

Nudging

You can nudge elements towards the center with --nudge. This is useful for creating elements that are slightly away from the edge of the Stack or Relative container.

<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>

Nested Radius Calculation

When you use nudge, Pos automatically calulates the border-radius of your nudged element according to the border radius formula.

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 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.

The CSS for Pos can be pretty complex because we supported both Stack and Relative for many positions.

.Relative {
  position: relative;
}

// Nudging
:where([class*='Pos']) {
  &.Pos-top {
    margin-block-start: var(--nudge-y, var(--nudge, 0));
  }

  &.Pos-topleft {
    margin-block-start: var(--nudge-y, var(--nudge, 0));
    margin-inline-start: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-topright {
    margin-block-start: var(--nudge-y, var(--nudge, 0));
    margin-inline-end: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-topfull {
    margin-block-start: var(--nudge-y, var(--nudge, 0));
    margin-inline: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-left {
    margin-inline-start: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-leftfull {
    margin-block: var(--nudge-y, var(--nudge, 0));
    margin-inline-start: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-right {
    margin-inline-end: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-rightfull {
    margin-block: var(--nudge-y, var(--nudge, 0));
    margin-inline-end: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-bottomleft {
    margin-block-end: var(--nudge-y, var(--nudge, 0));
    margin-inline-start: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-bottom {
    margin-block-end: var(--nudge-y, var(--nudge, 0));
  }

  &.Pos-bottomright {
    margin-block-end: var(--nudge-y, var(--nudge, 0));
    margin-inline-end: var(--nudge-x, var(--nudge, 0));
  }

  &.Pos-bottomfull {
    margin-block-end: var(--nudge-y, var(--nudge, 0));
    margin-inline: var(--nudge-x, var(--nudge, 0));
  }

  // Increased specificity for border-radius to override any border-radius a user may specify
  &[class*='Pos'] {
    border-radius: calc(var(--radius) - var(--nudge, 0px));
  }
}

// ========================
// Positioning in Stack
// ========================
// prettier-ignore
:where(.Stack) {
  // Top
  .Pos-top { place-self: start center; }
  .Pos-topleft { place-self: start start; }
  .Pos-topright { place-self: start end; }
  .Pos-topfull { place-self: start stretch; }

  // Bottom
  .Pos-bottomleft { place-self: end start; }
  .Pos-bottom { place-self: end center; }
  .Pos-bottomright { place-self: end end; }
  .Pos-bottomfull { place-self: end stretch; }

  // Left
  .Pos-left { place-self: center start; }
  .Pos-lefttop { place-self: start start; }
  .Pos-leftbottom { place-self: end start; }
  .Pos-leftfull { place-self: stretch start; }

  // Right
  .Pos-right { place-self: center end; }
  .Pos-righttop { place-self: start end; }
  .Pos-rightbottom { place-self: end end; }
  .Pos-rightfull { place-self: stretch end; }

  // Center
  .Pos-center { place-self: center center; }

  // Overlay
  > .Pos-overlay {
    display: grid;

    > * {
      grid-column: 1 / span 1;
      grid-row: 1 / span 1;
    }
  }
}

// prettier-ignore
:where(.relative, .Relative) {
  [class*='Pos'] { position: absolute; }

  // top
  [class*='Pos-top'] { inset-block-start: 0; }
  .Pos-topleft { inset-inline-start: 0; }
  .Pos-topright { inset-inline-end: 0; }
  .Pos-topfull { inset-inline: 0; }

  // Bottom
  [class*='Pos-bottom'] { inset-block-end: 0; }
  .Pos-bottomleft { inset-inline-start: 0; }
  .Pos-bottomright { inset-inline-end: 0; }
  .Pos-bottomfull { inset-inline: 0; }

  // Left
  [class*='Pos-left'] { inset-inline-start: 0; }
  .Pos-lefttop { inset-block-start: 0; }
  .Pos-leftbottom { inset-block-end: 0; }
  .Pos-leftfull { inset-block: 0; }

  // Right
  [class*='Pos-right'] { inset-inline-end: 0; }
  .Pos-righttop { inset-block-start: 0; }
  .Pos-rightbottom { inset-block-end: 0; }
  .Pos-rightfull { inset-block: 0; }

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

  // Overlay
  .Pos-overlay { inset: 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.

Pos

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 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

Parent Variables

Variable	Default	Description
`--radius`	`0.5rem`	Outer border radius to use for the inner border radius calculation

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.