css에서 position 속성은 무엇일까?

position 속성의 역할은 문서 상에 요소(Tag)를 배치하는 방법을 의미합니다.
position 속성에 쓰일 수 있는 것으로는 여러 값이 들어올 수 있는데요,
오늘은 static, relative, absolute, fixed 이 네 가지를 알아보도록 하겠습니다.

1. static

• 요소를 일반적인 문서 흐름에 따라 배치합니다.
• 왼쪽에서 오른쪽으로 위에서 아래로 요소들이 쌓이게 됩니다.
• 모든 태그들은 기본적으로 position: static 을 기본값으로 가지고 있습니다.

2. relative

• 자기 자신을 기준으로 top, bottom, left, right 값에 따라 오프셋을 적용합니다.
• 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 동일합니다.
  

위 이미지를 보면 position: relative와 top:10px; left: 10px; 값에 따라 오프셋을 적용한 것을 볼 수 있습니다.

3. absolute

• 만약 조상 중 position: static 속성이 없을 경우 body를 기준으로 top, bottom, left, right 값에 따라 오프셋을 적용합니다.
• absolute 는 position: static 속성을 가지고 있지 않은 조상(상위요소)에 대해 상대적으로 배치합니다.

<div class="container">
      <div class="static">static</div>
      <div class="relative">
        <div class="absolute">
          <p>absolute</p>
          <p>top: 10px</p>
          <p>left: 10px</p>
        </div>
      </div>
 </div>

위 이미지를 통해 absolute가 포함된 클래스의 상위 요소인 relative를 기준으로
위에서 10px 왼쪽으로 10px 띄운 것을 볼 수 있습니다. 만약 상위 요소에
position:static 만 존재한다면 최상위 요소인 body를 기준으로 10px 씩 이동하게 되어 현재 하늘색 박스가 노란색으로 대체될 겁니다.

4. fixed

• 말 그대로 해당 속성을 가진 태그는 특정 위치에 고정이 됩니다.
• 고정이 되기 때문에 스크롤을 아무리 내려도 상단에 고정이 되어 일반적으로 웹페이지의 header 부분을 고정시킬 때 주로 사용됩니다.
• top, bottom, left, right 같은 값을 지정하여 어느 부분에 고정시킬것인지 오프셋을 지정할 수 있습니다.