AAtomic CSS

top

Sets the top offset of a positioned element. Only works with position set to relative, absolute, fixed, or sticky.

Class Patterns

t{N}{unit} format. Use neg-t{N}{unit} for negative values.

ClassCSSDescription
t0top: 0Stick to top
t8pxtop: 8px8px below top
t16pxtop: 16px16px below top
t2remtop: 2rem20px below top
t5remtop: 5rem50px below top
t50ptop: 50%50% of parent height below
t100ptop: 100%Positioned at parent bottom
tatop: autoDefault (auto)
neg-t2remtop: -2rem20px above top
neg-t8pxtop: -8px8px above top

Visual Comparison

See how elements move based on top values within a positioned parent.

Top offset comparison for absolute elements

t0
t2rem
t5rem
t50p

t0 sticks to top, larger values move further down

Negative top — extends above

neg-t2rem
t0 (기준)

neg-t2rem extends 20px above parent top

Class Details

t{N}{unit}top: {value}

Sets the distance from the top reference point. Supports px, rem, % units.

<!-- sticky Header -->
<nav class="ps t0 w100p zi10 bg0F0F17 py12px px2rem">
  Fixed Navigation
</nav>

<!-- Absolute positioning -->
<div class="pr h20rem">
  <div class="pa t0 l0">Top left</div>
  <div class="pa t0 r0">Top right</div>
  <div class="pa t50p l50p">Center (transform needed)</div>
</div>

<!-- Dropdown menu (positioned below parent) -->
<div class="pr">
  <button>Menu</button>
  <ul class="pa t100p l0 mt4px bg18181B br8px p16px">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

tatop: auto

Resets top to default (auto). Useful for releasing top positioning at specific breakpoints.

<!-- Responsive: release top on mobile -->
<div class="pa t2rem sm-ta sm-pr">
  absolute on desktop + top: 2rem
  On mobile: relative + top: auto
</div>

neg-t{N}{unit}top: -{value}

Sets a negative top value. Moves elements above parent top.

<!-- Badge protruding above parent -->
<div class="pr mt2rem bg18181B p2rem br8px">
  <span class="pa neg-t8px r8px bg6366F1 cFFFFFF py4px px8px br4px fs12px">NEW</span>
  Card Content
</div>

<!-- Overlapping layout -->
<div class="pr">
  <div class="bg27272A p2rem br8px">Default area</div>
  <div class="pr neg-t2rem ml2rem bg6366F1 cFFFFFF p16px br8px">
    Overlapping area above
  </div>
</div>

Tips & Notes

position required

top does not work with position: static (default). Use with pr, pa, pf, or ps.

Sticky header pattern

ps t0 is the most common sticky header pattern. Sticks to top when scrolling.

% unit based on parent height

t50p moves down by 50% of parent height. May behave unexpectedly without explicit parent height.

rightbottomleftinsetposition