CSS : position

출처

https://developer.mozilla.org/en-US/docs/Web/CSS/position#accessibility_concerns

---

왜 궁금했을까

요소의 배치는 normal-flow, flex-flow, grid-flow 등을 따른다. 하지만, 해당 배치에서 벗어나, 자유롭게 위치를 변경하는 방법도 있다.
나는 이를 위해 position: absolute 를 자주 사용하는데, 이따금 내가 원하는대로 배치가 이루어지지 않는 불상사를 겪었다.

이는 내가 position 속성이 정확히 작동하는 방법을 인지하지 못했기 때문.
따라서, 나의 부족함을 채우고자 포지션에 대해 공부해봤다.

position

웹 개발의 영역에서 CSS는 웹페이지의 요소를 정확하게 배치하고 위치를 지정하는 다양한 도구를 제공한다. 이러한 도구 중 하나가 position 속성으로, 이는 요소가 포함된 요소 내에서 위치하는 방식을 정의하는 데 중요한 역할을 한다. 이 글에서는position 속성의 다양한 값인 static, relative, absolute, fixed, 그리고 sticky에 대한 고유한 특성과 사용 사례를 살펴보겠다.

1. position: static:
   HTML 요소의 기본 위치 지정 동작은 static이다. 요소가 정적으로 위치하면 문서의 일반적인 흐름(normal-flow)을 따른다. 요소가 position: static을 가지면, 일반 문서 흐름에 따라 위치하고, top right bottom left 및 z-index 속성이 효과를 주지 않는다는 것을 의미한다.
   ex)

  <div>
    박스1    
  </div>
  <div class="static-box">
    박스2    
  </div>
  <div>
    박스3    
  </div>

.static-box {
  position: static;
}

블록 요소가 노말플로우를 따르며, 위에서 아래로 순서대로 쌓이는 모습이다. static은 position의 디폴트 값으로, 특이사항을 찾아볼 수 없다.

2. position: relative:
   position 속성을 relative로 설정하면 요소를 문서 흐름에서의 일반적인 위치를 기준으로 배치할 수 있다. static과는 달리 relative 값을 가지는 요소는 top right bottom 및 left 속성을 사용하여 이동할 수 있다. 그러나 이러한 속성은 다른 요소의 위치에 영향을 미치지 않는다.
   ex)

  <div>
    박스1    
  </div>
  <div class="relative-box">
    박스2    
  </div>
  <div>
    박스3    
  </div>

.relative-box {
  position: relative;
  top: 60px; /* Moves the element 60 pixels down */
  left: 50px; /* Moves the element 50 pixels to the right */
}

위에서와 마찬가지로 블록 요소들이 노말플로우를 따르며, 위에서 아래로 순서대로 쌓인다. 다만, relative 값이 주어진 요소는, 주어진 top, left 값만큼 원래 있어야 하는 위치에서 이동한다.

3. position: absolute:
   position: absolute는 요소를 일반적인 문서 흐름에서 제거하고 가장 가까운 position 속성값이 지정된 조상 (static은 제외) 을 기준으로 배치합니다. 그러한 조상이 없는 경우, 요소는 viewport를 기준으로 배치된다. absolute 값을 가지는 요소는 일반적인 문서 흐름에서 제거되므로 다른 요소의 위치에 영향을 미치지 않는다.
   ex)

  <main>
    <div>
      박스1    
    </div>
    <div class="absolute-box">
      박스2    
    </div>
    <div>
      박스3    
    </div>
    <div>
      박스4    
    </div>
  </main>

main{
  position: relative;
}
.absolute-box {
  position: absolute;
  top: 70px;
  left: 50px;

relative 와 static 에서는 다르게, 박스2라는 요소가 기존의 배치에서 아예 제거된 모습이다. 박스2의 위치는 relative 값을 가지는 main 이라는 부모 요소에 종속되기 때문에, 다른 형제와는 어떠한 상호작용도 일어나지 않는다.

4. position: fixed:
   fixed는 absolute와 유사하지만, 요소가 가장 가까운 position 속성값이 지정된 조상 대신 viewport를 기준으로 배치된다. 이것은 fixed 값을 가지는 요소가 페이지를 스크롤해도 고정되어있게 만든다. 고정 위치 지정은 내비게이션 바나 배너와 같은 요소에 일반적으로 사용된다.
   ex)

    <div>
      박스1    
    </div>
    <div class="fixed-box">
      박스2    
    </div>
    <div>
      박스3    
    </div>
    <div>
      박스4    
    </div>

.fixed-box {
  position: fixed;
  top: 0px;
  left: 20px;
}

조상에게 종속되지 않고, viewport를 기준으로 위치가 결정된다. 스크롤을 내려도 같은 위치를 유지한다.

5. position: sticky:
   sticky는 relative와 fixed의 혼합이다. sticky 속성값을 가지는 요소는 지정된 스크롤 위치에 도달할 때까지 relative 속성값을 가지는 요소처럼 작동한다. 이후, 사용자가 지정된 지점을 스크롤하면 요소가 고정된다. 사용자가 지정된 지점을 넘어가면 요소가 다시 상대적인 위치로 돌아간다. 고정 위치 지정은 사용자가 콘텐츠를 스크롤할 때 보이는 고정 헤더나 사이드바를 만드는 데 사용된다.

ex)

    <div>
      박스1    
    </div>
    <div class="sticky-box">
      박스2    
    </div>
    <div>
      박스3    
    </div>
    <div>
      박스4    
    </div>

.sticky-box {
  position: sticky;
  top: 0; /* Positions the element at the top of its containing block until it reaches the specified scroll position */
}

처음에는 요소가 본인의 자리를 지킨다. 스크롤을 내려 내가 지정한 top: 0; 위치에 다르자, fixed와 똑같이 동작한다.

결론

position 속성의 다양한 값과 그들의 고유한 동작을 이해함으로써, 웹 개발자는 사용자 경험을 향상시키는 동적이고 인터랙티브한 레이아웃을 만들 수 있다. 문서 흐름에 따라 요소를 배치할지 또는 고정 위치로 유지할지 여부에 관계없이 position 속성은 원하는 레이아웃과 디자인을 구현할 수 있는 유연성을 제공한다.