position

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

---

position: static;

요소를 일반적인 문서 흐름에 따라 배치합니다. top (en-US), right (en-US), bottom (en-US), left (en-US), z-index 속성이 아무런 영향도 주지 않습니다. 기본값입니다.

---

position: relative;

요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.

여기 div태그를 이용하여 여러개의 상자를 만들었습니다.

html
<article class="container">
  <div></div>
  <div class="box">I'm Box</div>
  <div></div>
  <div></div>
  <div></div>
  ...

style.css
.container{
  background-color: skyblue;
  left:20px;
  top:20px;
  position: relative;
}
.box{
  background-color: red;
  left: 20px;
  top: 20px;
}

left와 top에 각각 20px;을 지정하였지만, position을 지정하지 않아 움직이지 않았습니다.

style.css
.box{
  background-color: red;
  left: 20px;
  top: 20px;
  position: relative;
}

position을 relative로 설정하니, 원래 있어야 할 자리에서 20px씩 움직입니다.
(top:20px; 은 top으로 부터 20px 띄우겠다고 생각하면 됩니다.)

---

position: absolute;

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

position을 absolute로 설정해보겠습니다.

.box{
  background-color: red;
  left: 20px;
  top: 20px;
  position:absolute;
}

absolute로 설정 하였더니 내 아이템이 담겨있는 박스. 즉, 원래 있어야 할 자리가 아닌 하늘색 바탕의 article을 기준으로 20px씩 이동한 것을 볼 수 있습니다.

---

position: fixed;

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 뷰포트의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.

이 값은 항상 새로운 쌓임 맥락을 생성합니다. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력됩니다.

position을 fixed로 설정해보겠습니다.

.container{
  background-color: skyblue;
  left:20px;
  top:20px;
  position: relative;
}
.box{
  background-color: red;
  left: 20px;
  top: 20px;
  position:fixed;
}

position을fixed로 설정 하였더니 하늘색 바탕의 article을 벗어났습니다. article은 웹페이지를 기준으로 20px씩 이동하여 배치해두었습니다. 즉, fixed를 이용하면 article을 기준으로 하지 않고, 웹페이지를 기준으로 이동하는 것을 볼 수 있습니다.

참조: MDN, 드림코딩by엘리