CSS 포지셔닝에서 Tailwind로

position:absolute → absolute. inset은 top/right/bottom/left. 커스텀 z-index는 arbitrary.

위치 규칙은 단순합니다. position:absolute는 absolute가 되고 오프셋은 방향별 유틸리티로 옮겨집니다. 까다로운 부분은 sticky 동작과 쌓임 맥락, overflow로 잘리는 요소라 브라우저에서 확인해야 합니다.

position과 오프셋

position:absolute → absolute. top/right/bottom/left는 스케일에 맞으면 inset-* 또는 top-*.

z-index

흔한 z-index → z-10 / z-50. 드문 브랜드 값은 z-[…].

sticky와 stacking

조상의 sticky + overflow는 고전 함정입니다. 변환 후 stacking context를 확인하세요.

사용해보기

변환기 열기

.example { display: flex; gap: 1rem; padding: 1rem; }

신뢰 메모: 결과를 시각적으로 확인하세요. 변환기는 초안용 도우미입니다.