position : absolute 와 position : relative 의 차이점

position에 관한 유머 밈

 

position : absolute 와  position : relative 의 차이점을 이해하는 데 적지 않은 시간을 보낸 적이 있었다.

누군가에게는 도움이 되기를 바라며 그림으로 차이점을 설명해보겠다.

 

먼저 position 속성을 지정하지 않을 때, position의 기본 동작을 알아야 한다.

 

position: static

position을 따로 선언해두지 않으면 기본값으로 적용된다.

기본적으로 흐름의 현재 위치를 기준으로 요소를 배치한다.

top, right, bottom, left, z-index는 적용되지 않는다. 

 

position: relative

레이아웃을 변경하지 않고 현재 자신의 위치를 기준으로 요소를 배치한다.

 

position: absolute

가장 가까운 위치에 있는 부모 요소 위치를 기준으로 요소를 배치한다.

 

 

예시

자식 요소 위치에 있는 4개의 상자들을 만들어 뒀다.

그리고 부모 요소 위치에 있는 테두리 점선이 자식요소인 4개의 상자들을 감싸고 있다.

position : static (기본값)

index.html

<div class=”parent”>
 <div class=”box” id=”one”>One</div>
 <div class=”box” id=”two”>Two</div>
 <div class=”box” id=”three”>Three</div>
 <div class=”box” id=”four”>Four</div>
</div>

 

style.css

.parent {
 border: 2px black dotted;
 display: inline-block;
}
.box {
 display: inline-block;
 background: red;
 width: 100px;
 height: 100px;
}
#two {
  background: green;
}

 

 

기본적으로 position : static 으로 설정된다. 기본값이니까.

레이아웃을 기반으로 위치를 지정한다.

 

Position : relative

Q.  초록색 박스(two)를 이동시키고 싶은데 그 주위의 레이아웃에 영향을 주지 않으려면 어떻게 해야 할까?

 

A. 여기에서 position : relative 가 등장하는 부분이다.

초록색 박스 주변의 레이아웃을 변경하지 않고 현재 위치를 기준으로 왼쪽과 위쪽으로부터 20px 이동한다.

/* position : relative */

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

position : relative

 

 

Position: absolute 는 위와 반대이다.

초록색 박스에 position : absolute 를 적용하면 기존 위치에 공간이 남지 않는다.

초록색 박스의 위치는 부모 포지션(점선 테두리)를 기준으로 한다.

따라서 원래 초록색 박스가 차지하던 공간이 없어지고 점선의 왼쪽 상단 원점에서 왼쪽과 아래로 20px 이동한다.

position : absolute

/* position : absolute */

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

 

 

간단히 말하자면

position: relative는 주변 레이아웃을 변경하지 않고 현재 자신의 위치를 기준으로 요소를 배치하는 반면에

position: absolute는 부모 위치를 기준으로 요소를 배치하고 주변 레이아웃을 변경한다.