AAtomic CSS

top

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

클래스 패턴

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

클래스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 헤더 -->
<nav class="ps t0 w100p zi10 bg0F0F17 py12px px2rem">
  고정 네비게이션
</nav>

<!-- absolute 위치 지정 -->
<div class="pr h20rem">
  <div class="pa t0 l0">좌상단</div>
  <div class="pa t0 r0">우상단</div>
  <div class="pa t50p l50p">중앙 (transform 필요)</div>
</div>

<!-- 드롭다운 메뉴 (부모 아래에 위치) -->
<div class="pr">
  <button>메뉴</button>
  <ul class="pa t100p l0 mt4px bg18181B br8px p16px">
    <li>항목 1</li>
    <li>항목 2</li>
  </ul>
</div>

tatop: auto

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

<!-- 반응형: 모바일에서 top 해제 -->
<div class="pa t2rem sm-ta sm-pr">
  데스크탑에서는 absolute + top: 2rem
  모바일에서는 relative + top: auto
</div>

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

음수 top 값을 설정합니다. 요소를 부모 상단 위로 이동시킬 때 사용합니다.

<!-- 부모 위로 튀어나오는 뱃지 -->
<div class="pr mt2rem bg18181B p2rem br8px">
  <span class="pa neg-t8px r8px bg6366F1 cFFFFFF py4px px8px br4px fs12px">NEW</span>
  카드 콘텐츠
</div>

<!-- 겹치는 레이아웃 -->
<div class="pr">
  <div class="bg27272A p2rem br8px">기본 영역</div>
  <div class="pr neg-t2rem ml2rem bg6366F1 cFFFFFF p16px br8px">
    위로 겹치는 영역
  </div>
</div>

팁 & 주의사항

position 필수

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

sticky 헤더 패턴

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

% 단위는 부모 높이 기준

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

rightbottomleftinsetposition