minstudio

Position 속성

요소를 원하는 곳에 띄우는 Position

일반적인 문서 흐름(Normal Flow)에서 벗어나 요소를 자유롭게 배치할 때 사용합니다.

속성 (Property) 설명 및 기준점
static 기본값. 좌표 이동이 불가능합니다.
relative 원래 있던 자리를 기준으로 이동합니다. (주로 absolute의 기준점으로 쓰임)
absolute 가장 가까운 relative 부모를 기준으로 이동하며, 문서 흐름에서 빠져 공중에 뜹니다.
fixed 브라우저 화면(Viewport)을 기준으로 고정되어 스크롤해도 따라다닙니다.
sticky 평소엔 화면 흐름에 따라가다, 스크롤이 지정된 위치에 도달하면 화면에 찰싹 달라붙습니다!

요소가 겹칠 땐? z-index

position을 사용하여 공중에 띄운 요소들이 서로 겹칠 때, 누가 앞으로 올지 결정하는 것이 z-index입니다.
숫자가 클수록 사용자에게 가깝게(위로) 배치됩니다. (예: 모달창은 보통 9999)

[참고] Float와 Clear (과거의 유산)

과거에는 레이아웃을 잡을 때 float: left와 clear: both를 억지로 사용했습니다. 하지만 현재는 Flexbox와 Grid가 그 역할을 완벽히 대체했습니다. float는 이제 오직 "이미지 주위로 텍스트를 감싸게 할 때(Text wrapping)"만 제한적으로 사용하세요.

<div style="margin-bottom: 10px;">👇 아래 박스 안에서 <strong>스크롤을 천천히 내려보세요!</strong></div>
<div class="scroll-container">
  <div class="box-absolute">
    Absolute (z-index: 1)<br>
    <span style="font-size: 0.8rem; font-weight: normal;">부모를 기준으로 50px 내려옴.<br>같이 스크롤되어 올라갑니다.</span>
  </div>
  
  <div class="box-sticky">
    Sticky (z-index: 10)<br>
    <span style="font-size: 0.8rem; font-weight: normal;">천장에 닿으면 찰싹 달라붙습니다!<br>z-index가 더 높아서 빨간 박스 위를 지납니다.</span>
  </div>
</div>
실행 결과
Position 속성 | Minstudio