AAtomic CSS

position

Determines how an element is positioned within the document. Used with top, right, bottom, left, and z-index.

Class List

ClassCSSDescription
pstposition: staticDefault. Follows document flow. top/left etc. ignored
prposition: relativeOffset from original position. Reference point for child absolute
paposition: absoluteRemoved from flow. Positioned relative to nearest positioned parent
pfposition: fixedFixed to viewport. Position maintained on scroll
psposition: stickyrelative + fixed hybrid. Fixed at scroll threshold
piposition: initialReset to initial value (static)

Visual Comparison

Compares how each position value affects elements.

Static (default value) —pst

static 요소

Positioned according to document flow. top/left etc. are ignored.

Relative — pr

원래 위치 (점선)
pr t2rem l2rem

Moves top: 2rem, left: 2rem from the original position. Original space is preserved.

Absolute — pa

부모 (pr)
pa t8px r8px
pa b8px l8px

Removed from document flow, positioned relative to parent

Fixed — pf

pf 시뮬레이션

Actual pf is fixed to the viewport. Position does not change on scroll.

Sticky — ps

스크롤 콘텐츠 1
ps t0 (스크롤하면 상단에 고정)
스크롤 콘텐츠 2
스크롤 콘텐츠 3
스크롤 콘텐츠 4

Scroll the box above and the purple element sticks to the top.

When to Use What?

SituationRecommendedReason
드롭다운 메뉴pa부모 기준으로 정확한 위치에 표시
고정 헤더/네비게이션pf / ps스크롤해도 항상 보이게 고정
툴팁/팝오버pa트리거 요소 기준으로 표시
모달 오버레이pf뷰포트 전체를 덮는 배경
위치 미세 조정pr원래 위치에서 약간의 오프셋
사이드바 고정ps스크롤하다가 특정 위치에서 고정
뱃지/아이콘 오버레이pa부모 위에 겹쳐서 표시

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 zi10Reference point + stacking order
pr t8px l8pxFine adjustment from original position
pr ohReference 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 l0Place at parent top-left
pa t0 r0Place at parent top-right
pa b0 r0Place at parent bottom-right
pa t0 l0 r0 b0Overlay covering entire parent
pa t100p l0Place directly below parent (dropdown)
pa t50p l50pCenter 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 r0Fixed to top of screen (header)
pf b0 l0 r0Fixed to bottom of screen (footer/nav)
pf t0 l0 w100p h100pFull-screen overlay (modal backdrop)
pf b2rem r2remBottom-right floating button
pf t50p l50pViewport 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 ash">
    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 CombinationBehavior
ps sm-pst t0Default sticky -> static below 768px
pf md-pst t0 l0 r0Default fixed -> static below 1024px
pst sm-ps t0Default static -> sticky below 768px
pa md-prDefault absolute -> relative below 1024px
ps lg-pst t0Default 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).

top / right / bottom / leftz-indexinsetoverflowdisplay