AAtomic CSS

top

위치가 지정된 요소의 상단 오프셋을 설정합니다. position이 relative, absolute, fixed, sticky인 요소에서만 동작합니다.

클래스 패턴

t{N}{unit} 형태로 값을 지정합니다. 음수는 neg-t{N}{unit} 패턴을 사용합니다.

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
t0top: 0상단에 붙임
t8pxtop: 8px상단에서 8px 아래
t16pxtop: 16px상단에서 16px 아래
t2remtop: 2rem상단에서 20px 아래
t5remtop: 5rem상단에서 50px 아래
t50ptop: 50%부모 높이의 50% 아래
t100ptop: 100%부모 하단에 위치
tatop: auto기본값 (자동)
neg-t2remtop: -2rem상단 위로 20px 벗어남
neg-t8pxtop: -8px상단 위로 8px 벗어남

시각적 비교

position이 설정된 부모 안에서 top 값에 따라 요소가 어떻게 이동하는지 확인하세요.

absolute 요소의 top 오프셋 비교

t0
t2rem
t5rem
t50p

t0은 상단에 붙고, 값이 커질수록 아래로 이동합니다

음수 top — 위로 벗어남

neg-t2rem
t0 (기준)

neg-t2rem은 부모 상단 위로 20px 벗어납니다

클래스별 상세

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

위치가 지정된 요소의 상단 기준점에서의 거리를 설정합니다. px, rem, % 단위를 지원합니다.

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

top을 기본값(auto)으로 되돌립니다. 반응형에서 특정 breakpoint에서 top 위치를 해제할 때 유용합니다.

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

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

팁 & 주의사항

position 필수

top은 position: static(기본값)에서는 동작하지 않습니다. 반드시 pr, pa, pf, ps 중 하나와 함께 사용하세요.

sticky 헤더 패턴

ps t0은 가장 흔한 sticky 헤더 패턴입니다. 스크롤 시 상단에 고정됩니다.

% 단위는 부모 높이 기준

t50p는 부모 요소 높이의 50%만큼 아래로 이동합니다. 부모에 명시적 높이가 없으면 기대와 다르게 동작할 수 있습니다.

rightbottomleftinsetposition