[CSS] position: absolute와 inset의 의미

CSS에서 position은 요소가 어디를 기준으로 배치되는지를 결정하는 핵심 속성이다.
특히 absolute와 relative의 관계를 이해하면 레이아웃이 훨씬 명확해진다.

 

1. relative로 바뀐 green이 기준이 된다

green 요소의 position을 static에서 relative로 변경하면,

자식 요소의 absolute 변경 시 기준점이 되는 역할을 하게 된다.

.green {
  position: relative;
}

이 설정 하나로, green은 가장 가까운 positioned 조상이 된다.

 

2. absolute인 blue는 가장 가까운 relative 조상을 기준으로 이동한다

blue 요소는 position: absolute로 설정되어 있다.

.blue {
  position: absolute;
  bottom: 40px;
}

이때 중요한 규칙은 다음과 같다.

absolute 요소는
position이 static이 아닌 가장 가까운 조상을 기준으로 배치된다.

 

따라서,

• green이 relative이기 때문에
• blue는 브라우저 전체가 아니라 green 박스를 기준으로
• bottom: 40px만큼 위로 이동한다.

결과적으로 blue는 green 내부에서 떠 있는 것처럼 배치된다.

 

 

 

3. inset은 top / right / bottom / left의 축약 표현이다

inset은 absolute(또는 fixed) 요소에서 자주 쓰이는 속성으로,
아래 네 가지를 한 번에 표현한 축약 속성이다.

inset: top right bottom left;

예를 들어,

.blue {
  position: absolute;
  inset: auto auto 40px 0;
}

이는 다음과 동일하다.

.blue {
  bottom: 40px;
  left: 0;
}

• inset 역시 기준은 동일하다
• 즉, blue의 inset 값도 가장 가까운 relative 조상인 green을 기준으로 계산된다

 

4. 정리하면

• absolute는 가장 가까운 relative 조상을 기준으로 움직인다
• inset은 top/right/bottom/left를 한 번에 쓰는 표현이며
  기준점 규칙은 absolute와 완전히 동일하다