Position
요소의 위치 지정 방식과 좌표 속성입니다.
Position
| 클래스 | CSS |
|---|---|
pst | position: static |
pr | position: relative |
pa | position: absolute |
pf | position: fixed |
ps | position: sticky |
pi | position: initial |
좌표 (Top / Right / Bottom / Left)
숫자+단위를 붙여서 좌표를 지정합니다:
| 프리픽스 | 속성 | 예시 |
|---|---|---|
t | top | t0, t50p, t2rem |
r | right | r0, r16px |
b | bottom | b0, b2rem |
l | left | l0, l50p |
Auto 값 / Z-index
| 클래스 | CSS |
|---|---|
ta | top: auto |
ra | right: auto |
ba | bottom: auto |
la | left: auto |
zi10 | z-index: 10 |
zi999 | z-index: 999 |
neg-zi5 | z-index: -5 |
사용 예시
<!-- 고정 헤더 -->
<header class="ps t0 l0 w100p zi100">고정 헤더</header>
<!-- 절대 중앙 정렬 -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">중앙</div>
<!-- 스티키 사이드바 -->
<aside class="ps t6-4rem">사이드바</aside>