HTML&CSS position 속성

1 분 소요

Position 속성

css position 속성은 문서 상에 element를 배치하는 방법을 지정합니다.

top, left, bottom, right는 position 속성이 있을 때만 적용되는 프로퍼티입니다.

<div class="position-box"></div>
<div class="position-box thisbox"></div>
<div class="position-box"></div>

.position-box {
  margin: 10px 10px;
  background-color: pink;
  width: 100px;
  height: 100px;
}

.thisbox {
  background-color: yellowgreen;
}

모든 예제는 위 코드를 공통적으로 적용하고 갑니다!

.thisbox {
  background-color: yellowgreen;
  position: relative;
  left: 20px;
  top: 40px;
}

relative는 요소를 일반적인 흐름에 따라 배치하고, 자기 자신을 기준으로 top, left, bottom, right에 준 값을 적용합니다!

보시면 원래 연두색 박스가 있던 자리에는 빈 공간이 남고,

원래 있던 자리를 기준으로 왼쪽에서 20픽셀, 위에서 40픽셀 떨어진 모습을 볼 수 있습니다

.thisbox {
  background-color: yellowgreen;
  position: absolute;
  left: 20px;
  top: 40px;
}

absolute는 요소를 일반적인 흐름에서 제거하고, 가장 가까운 부모 엘리먼트를 기준으로 요소의 위치를 결정합니다.

단, 부모 엘리먼트가 없는 경우에는 초기 컨테이닝 블록을 기준으로 삼는다고 하네요

따라서 방금 전의 relative와 달리 원래 있던 자리에 빈 공간이 남지 않고,

부모 엘리먼트 기준 왼쪽에서 20, 위에서 40픽셀 떨어진 곳에 배치된 모습을 볼 수 있습니다.

.thisbox {
  background-color: yellowgreen;
  position: fixed;
  left: 20px;
  top: 40px;
}

fixed도 요소를 일반적인 흐름에서 제거하고, 현재 화면에 보여지고 있는 영역(뷰포트)의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다.

이미지 오른쪽에 스크롤바가 보이시나요..?(….)

스크롤을 살짝 아래로 내려도 연두색 박스는 항상 왼쪽에서 20, 위에서 40픽셀 떨어져있는 곳에 위치합니다.

.thisbox {
  background-color: yellowgreen;
  position: sticky;
  left: 20px;
  top: 40px;
}

Sticky는 요소를 일반적인 흐름에 따라 배치하고, 가장 가까운 스크롤 동작을 하는 조상에 달라붙습니다.

이번에도 오른쪽에 스크롤이 보이시나요..?(…)

fixed와 달리 원래 요소가 있던 자리에 빈 공간이 생긴 것을 볼 수 있습니다.

참고자료 : position