Splendid Labz

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>