Logo

CSS의 absolute position 작동 메커니즘 이해

특정 HTML 요소를 상위 요소를 기준으로 배치시키기 위해서 사용하는 absolute position에 대해서 알아보겠습니다.

HTML 요소 배치 관련 CSS 속성

CSS의 position 속성은 요소가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 기본값은 static이며 relative나 absolute, fixed 등으로 변경이 가능하죠. 이번 포스팅에서 그 중에서도 가장 다루기 까다로운 absolute에 대해서 알아보려고 하는데요.

position 속성을 static이 아닌 다른 값으로 설정했을 때, 함께 사용하는 포지셔닝 관련 CSS 속성 있습니다. 대표적으로 top, left, bottom, right 등을 들 수 있는데, 웹페이지 상에서 엘리멘트의 오프셋(offset)을 지정하기 위해 사용됩니다. 예를 들어, top은 위에서 얼마나, left는 좌측에서 얼마나, bottom은 아래에서 얼마나, right는 우측에서 얼마나 떨어져야 하는지를 결정합니다.

absolute position의 특징

position 속성이 absolute로 설정되어 있는 요소는 웹페이지 상에 배치될 때 다음과 같은 특징을 갖습니다.

  • 부모 요소 내부에 속박되지 않고, 독립된 배치 문맥(positioning context)을 가지게 됩니다. 마치 포토샵 같은 그래픽 툴에서 새로운 레이어를 추가하는 효과에 비슷하다고 생각하시면 됩니다.
  • 따라서, 요소를 기본적으로 브라우저 화면(viewport) 상에서 어디든지 원하는 위치에 자유롭게 배치시킬 수 있으며, 심지어 부모 요소 위에 겹쳐서 배치할 수도 있습니다.
  • 단, 상위 요소 중에 position 속성이 relative인 요소가 있다면, 그 중 가장 가까운 요소의 내부에서만 요소를 자유롭게 배치할 수 있습니다. 즉, 전체 화면이 아닌 해당 상위 요소를 기준으로 offset 속성(top, left, bottom, right)이 적용됩니다.

CSS를 공부하시는 분들이 특히 마지막 특징을 많이 헷갈려하시는데요. 지금부터 간단한 예제를 통해 absolute position의 작동 메커니즘을 차근차근 설명드리겠습니다.

absolute position의 적용

어떤 요소의 position 속성을 absolute로 적용하였 때, 위에서 언급한 특징이 어떻게 발현되는지 이해하는 것이 매우 중요합니다.

예를 들어, 다음과 같이 두 개의 자식을 갖는 부모 요소가 있다고 가정을 해보겠습니다.

<div class="parent">
  Parent
  <div class="child">Child #1</div>
  <div class="child">Child #2</div>
</div>

그리고 각 요소를 보기 편하도록 parent와 child 클래스에 간단한 스타일을 적용하였습니다.

.parent {
  border: 2px solid blue;
  color: blue;
  background: lightskyblue;
  padding: 1rem;
}

.child {
  border: 2px dotted red;
  color: red;
  background: lightpink;
  padding: 1rem;
}

아직까지는 position 속성을 건들지 않았기 때문에, 부모와 자식 요소 간의 일반적인 배치 흐름을 가지게 됩니다.

그 다음, position 속성을 absolute로 변경하기 위해서 abs라는 클래스에 대한 스타일을 추가로 정의합니다.

.abs {
  position: absolute;
}

그리고 두 번째 자식 요소에 이 abs 클래스를 적용하는 순간,

<div class="child abs">Child #2</div>

부모 요소는 이 자식 요소를 테두리 밖으로 밀어내며 마치 없는 자식(?) 취급을 하게 됩니다.

그런데 여기서 밀려난 자식 요소는 왜 원래 자리에 멀뚱히 남아 있을까요? 그 이유는 offset 속성을 명시하지 않으면, 기본값인 auto가 적용되는데, 그러면 원래 position 속성이 static이었을 때의 위치와 일치하도록 offset 속성값이 자동 지정되기 때문입니다.

.abs {
  position: absolute;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
}

top과 left 속성값을 각각 0과 10px로 수동 지정해주면,

.abs {
  position: absolute;
  top: 0;
  left: 10px;
}

두 번째 자식 요소는 브라우저 상단에 딱 붙고, 좌측으로 부터는 10px 떨어진 지점에 배치됩니다.

자, 이 상태에서 인라인 스타일을 통해 부모 요소의 position 속성을 relative로 변경해보겠습니다.

<div class="parent" style="position: relative">
  <!-- 생략 -->
</div>

그러면, positioning context가 전체 화면(viewport)에서 부모 요소로 변경되어, top과 left 속성이 적용 됨을 알 수 있습니다.

마치면서

지금까지 absolute position의 중요한 특징과 간단한 예제를 통해 absolute position이 웹페이지에서 어떻게 작동하는지 살펴보았습니다. 이러한 absolute position의 재미있는 작동 방식은 실제 UI 디자인에 다양하게 활용됩니다. 실전에서 absolute position을 응용하는 방법에 대해서는 추후 포스팅를 통해 다뤄보도록 하겠습니다.

관련 포스팅

참고

This work is licensed under CC BY 4.0

messageCircle