relative vs absolute 개념 비교

 

 

 

 

 

오늘은 CSS position 속성 값에 대해 알아봅시다.

 

 

 

🌻 position이란?

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. position 속성을 사용하여 위치를 지정할 때에는 어느 곳에서부터 얼만큼 떨어지게 할 것인지를 지정해줘야 하므로 top, right, bottom, left 속성과 함께 작성해 줍니다. position의 기본값은 static이고 그 외의 값으로는 relative, absolute, fixed, sticky가 있습니다. 

 

 

 

 

 

📍 position 값

 

1. static

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

 

 

 

2. relative

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

 

 

 

📝 예제

HTML

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>

 

 

CSS

.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  display: inline-block;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: pink;
}

 

상대적으로 배치된 Two 요소는 문서 내에서 정상적인 위치에서 오프셋만큼 떨어지지만, 다른 요소에는 영향을 주지 않습니다.

 

 

 

 

3. absolute

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

 

 

 

📝 예제

HTML

  <div class="box" id="one">One</div>
  <div class="box" id="two">Two</div>
  <div class="box" id="three">Three</div>

 

 

CSS

.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  display: inline-block;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: pink;
}

 

절대적으로 배치된 Two 요소의 가장 가까운 위치 지정 조상 요소가 없으므로 초기 컨테이닝 블록이 기준이 됩니다.

 

 

 

 

4. fixed

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

 

 

📝 예제

HTML

  <div class="container">
    <div class="box" id="one">One</div>
    <div class="box" id="two">Two</div>
  </div>

 

 

CSS

.container {
  position: relative;
  top: 20px;
}

.box {
  width: 100px;
  height: 100px;
  background: skyblue;
  display: inline-block;
}

#two {
  position: fixed;
  top: 50px;
  left: 20px;
  background: pink;
}

 

Two 요소의 가장 가까운 위치 지정 조상 요소 container가 있지만 container를 비롯한 조상 요소에 transform, perspective, filter 속성이 none이 아닌 조상이 존재하지 않으므로 Two 요소의 컨테이닝 블록은 뷰포트의 초기 컨테이닝 블록입니다.

 

 

 

 

5. sticky

요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.

 

 

sticky 위치 지정은 relative와 fixed 위치 지정을 합친 것으로 생각할 수 있습니다. sticky로 배치된 요소는 상대적으로 배치된 요소로 취급하지만 주어진 경계선을 지나면 고정 위치를 갖게 됩니다. sticky 위치 지정은 흔히 사전순 리스트의 레이블에 사용할 수 있습니다. 예를 들어 "B" 레이블은 "A"로 시작하는 목록이 화면 밖으로 나갈 때까지는 그 바로 밑에 표시되고, 그 다음에는 "A"를 따라 화면 밖으로 나가는 대신 화면 위에 고정시킬 수 있습니다. 그러다가 "B"목록이 화면 밖으로 나가면 그 자리에 "C" 레이블을 고정시킬 수 있습니다.

 

sticky 위치 지정이 의도한 대로 동작하게 하려면 top, right, bottom, left 중 적어도 하나의 값을 설정해야 합니다. 값을 설정하지 않으면 relative 위치 지정과 다를 바가 없습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

MDN 문서 참조

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN