Position

Set the positioning of an element.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

Usage

Static

Position the element according to the normal document flow.

Static Position

Another Element

<div class="c-white">
  <div class="p-s p-4 bg-indigo">Static Position</div>
  <div class="p-4 bg-indigo-2 c-slate">Another Element</div>
</div>

Absolute

Position the element relative to its nearest positioned ancestor.

Absolute Position

<div class="p-r h-32 p-4 bg-indigo-2 c-white">
  <div class="l-4 t-4 p-a p-4 bg-indigo">Absolute Position</div>
</div>

Fixed

Position the element relative to the viewport.

<div class="c-white">
  <div class="r-4 t-4 p-f p-4 bg-indigo">Fixed Position</div>
  <div class="h-s p-4 bg-indigo-2 c-white">Scroll down to see the fixed element.</div>
</div>

Relative

Position the element relative to its normal position.

Relative Position

Another Element

<div class="c-white">
  <div class="l-4 t-4 p-r p-4 bg-indigo">Relative Position</div>
  <div class="p-4 bg-indigo-2 c-slate">Another Element</div>
</div>

Sticky

Try scrolling through the container to see how the sticky behavior works.

Stick the element to a specified threshold within its container.

Sticky Position

Scroll down to see the sticky behavior.

<div class="b-1 o-y-s h-64 c-white">
  <div class="t-0 p-st p-4 bg-indigo">Sticky Position</div>
  <div class="h-96 p-4 bg-indigo-2 c-slate">Scroll down to see the sticky behavior.</div>
</div>

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:p-*

Small≥640px

md:p-*

Medium≥768px

lg:p-*

Large≥1024px

xxl:p-*

Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:p-*