position
Determines how an element is positioned within the document. Used with top, right, bottom, left, and z-index.
Class List
| Class | CSS | Description |
|---|---|---|
pst | position: static | Default. Follows document flow. top/left etc. ignored |
pr | position: relative | Offset from original position. Reference point for child absolute |
pa | position: absolute | Removed from flow. Positioned relative to nearest positioned parent |
pf | position: fixed | Fixed to viewport. Position maintained on scroll |
ps | position: sticky | relative + fixed hybrid. Fixed at scroll threshold |
pi | position: initial | Reset to initial value (static) |
pu | position: unset | Resets position (unset) |
Visual Comparison
Compares how each position value affects elements.
Static (default value) —pst
Positioned according to document flow. top/left etc. are ignored.
Relative — pr
Moves top: 2rem, left: 2rem from the original position. Original space is preserved.
Absolute — pa
Removed from document flow, positioned relative to parent
Fixed — pf
Actual pf is fixed to the viewport. Position does not change on scroll.
Sticky — ps
Scroll the box above and the purple element sticks to the top.
When to Use What?
| Situation | Recommended | Reason |
|---|---|---|
| Dropdown menu | pa | Positioned precisely relative to the parent |
| Fixed header/navigation | pf / ps | Stays visible while scrolling |
| Tooltip/popover | pa | Positioned relative to the trigger element |
| Modal overlay | pf | Background covering the entire viewport |
| Fine position adjustment | pr | Slight offset from the original position |
| Sticky sidebar | ps | Sticks at a specific point while scrolling |
| Badge/icon overlay | pa | Layered on top of the parent |
Class Details
pstposition: static
Default value. The element follows the normal document flow. top, right, bottom, left, and z-index properties do not apply.
<!-- Default position (usually no need to specify) -->
<div class="pst">
Placed according to document flow.
top, left, etc. do not apply.
</div>
<!-- Used to reset position in responsive -->
<div class="ps sm-pst t0">
Desktop: sticky → Mobile: static
</div>prposition: relative
Applies offset relative to the original position. Original space is preserved. Also serves as the positioning reference for child pa (absolute) elements.
<!-- Offset from original position -->
<div class="pr t8px l16px">
Moved top: 8px, left: 16px from original position
</div>
<!-- Reference point for pa children (most common use) -->
<div class="pr">
<img src="avatar.jpg" class="w4-8rem h4-8rem br50p" />
<span class="pa b0 r0 w12px h12px bg34D399 br50p"></span>
</div>Common Combinations
pr zi10 | Resets position (unset) |
pr t8px l8px | Fine adjustment from original position |
pr oh | Reference point + child overflow hidden |
paposition: absolute
Completely removed from document flow. Positioned relative to the nearest positioned ancestor (pr, pa, pf). Falls back to viewport if none exists.
<!-- Top-right placement relative to parent -->
<div class="pr w100p h10rem bg18181B br8px">
<span class="pa t8px r8px bg6366F1 cFFFFFF py4px px8px br4px fs12px">
NEW
</span>
<div class="p2rem">Card Content</div>
</div>
<!-- Dropdown menu -->
<div class="pr dib">
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Menu</button>
<ul class="pa t100p l0 mt4px bg18181B b1pxsolid27272A br8px p16px lsn minw16rem zi10">
<li class="py4px cFAFAFA">Item 1</li>
<li class="py4px cFAFAFA">Item 2</li>
<li class="py4px cFAFAFA">Item 3</li>
</ul>
</div>
<!-- Center aligned (transform Combination) -->
<div class="pr h20rem bg18181B br8px">
<div class="pa t50p l50p neg-tty50p neg-ttx50p bg6366F1 cFFFFFF p2rem br8px">
Center positioning
</div>
</div>Caution
When using pa, always set pr on the parent. Otherwise it positions relative to the viewport and appears in an unexpected location.
Common Combinations
pa t0 l0 | Place at parent top-left |
pa t0 r0 | Place at parent top-right |
pa b0 r0 | Place at parent bottom-right |
pa t0 l0 r0 b0 | Overlay covering entire parent |
pa t100p l0 | Place directly below parent (dropdown) |
pa t50p l50p | Center alignment (requires transform) |
pfposition: fixed
Positioned relative to the viewport. Position does not change on scroll. Used for fixed headers, floating buttons, and modal overlays.
<!-- Fixed header -->
<header class="pf t0 l0 r0 bg0F0F17 py12px px2rem zi100 bb1pxsolid27272A">
<nav class="df jcsb aic">
<div class="cFAFAFA fw700">Logo</div>
<div class="df gap2rem">
<a href="#" class="cA1A1AA tdn">Home</a>
<a href="#" class="cA1A1AA tdn">About</a>
</div>
</nav>
</header>
<!-- Modal overlay -->
<div class="pf t0 l0 w100p h100p bg0-0-0-50 df jcc aic zi999">
<div class="bg18181B br12px p3-2rem maxw48rem w100p">
<h2 class="cFAFAFA fs2rem fw700 mb16px">Modal Title</h2>
<p class="c71717A fs14px">Modal Content</p>
</div>
</div>
<!-- Floating button -->
<button class="pf b2rem r2rem w4-8rem h4-8rem br50p bg6366F1 cFFFFFF bn cp zi50 df jcc aic">
↑
</button>Common Combinations
pf t0 l0 r0 | Fixed to top of screen (header) |
pf b0 l0 r0 | Fixed to bottom of screen (footer/nav) |
pf t0 l0 w100p h100p | Full-screen overlay (modal backdrop) |
pf b2rem r2rem | Bottom-right floating button |
pf t50p l50p | Viewport center (requires transform) |
psposition: sticky
A hybrid of relative and fixed. Becomes fixed after passing the scroll threshold. Must be used with an offset value like top.
<!-- Navigation fixed on scroll -->
<nav class="ps t0 bg0F0F17 py12px px2rem zi50 bb1pxsolid27272A">
<div class="df gap2rem">
<a href="#section1" class="cA1A1AA tdn">Section 1</a>
<a href="#section2" class="cA1A1AA tdn">Section 2</a>
<a href="#section3" class="cA1A1AA tdn">Section 3</a>
</div>
</nav>
<!-- Fixed table header -->
<div class="maxh40rem oya">
<table class="w100p bcc">
<thead>
<tr>
<th class="ps t0 bg18181B py12px px16px zi10">Name</th>
<th class="ps t0 bg18181B py12px px16px zi10">Email</th>
</tr>
</thead>
<tbody>
<!-- Data rows -->
</tbody>
</table>
</div>
<!-- Sidebar sticky -->
<div class="dg gtc25rem-1fr gap2rem">
<aside class="ps t2rem">
Side navigation (fixed on scroll)
</aside>
<main>Main Content</main>
</div>Caution
ps requires a scroll container. It does not work if the parent has oh (overflow: hidden). An offset value like t0 must also be specified.
piposition: initial
Resets the position property to its initial value (static). Useful for resetting position at specific screen sizes in responsive design.
<!-- Reset position in responsive -->
<div class="ps sm-pi t0">
Desktop: sticky Fixed
Mobile (768px and below): reset to initial (static)
</div>Responsive Combinations
Combine with media query prefixes to change position based on screen size.
<!-- Desktop sticky → Mobile static -->
<nav class="ps sm-pst t0">
Fixed on scroll on desktop, normal flow on mobile
</nav>
<!-- Desktop fixed Header → Mobile static -->
<header class="pf sm-pst t0 l0 r0">
Fixed header on desktop, normal placement on mobile
</header>| Class Combination | Behavior |
|---|---|
ps sm-pst t0 | Default sticky -> static below 768px |
pf md-pst t0 l0 r0 | Default fixed -> static below 1024px |
pst sm-ps t0 | Default static -> sticky below 768px |
pa md-pr | Default absolute -> relative below 1024px |
ps lg-pst t0 | Default sticky -> static below 1280px |
Tips & Notes
pa requires a pr parent
pa is positioned relative to the nearest positioned ancestor. Without pr on the parent, it falls back to the viewport and appears in an unintended location.
pf is viewport-based, not parent-based
pf always positions relative to the viewport. It operates independently of the parent element, so specify the position in the full screen context.
ps requires a scroll container
ps only works inside a scrollable parent. Sticky does not work if the parent has oh (overflow: hidden).
z-index only applies to positioned elements
z-index classes like zi10 only work on elements with a position value other than pst (static).