Logo

[CSS] Absolute Position - 자유로운 엘리먼트 배치

부모 엘리먼트애 구애받지 않고 엘리먼트를 자유롭게 배치시킬 수 있는 absolute position에 대해서 알아보겠습니다.

엘리먼트 배치 관련 CSS 속성

CSS의 position 속성은 엘리먼트가 브라우저 화면에 어떻게 배치되는가를 결정합니다. 기본값은 static이며 relativeabsolute, fixed 등으로 변경이 가능합니다. 이번 포스트에서 중점적으로 다룰 position 속성값은 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)이 적용됩니다.

많은 분들이 마지막 특징을 햇갈려하는데 아래 예제를 통해 구체적인 작동 매커니즘을 살펴보겠습니다.

absolute position의 적용

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

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

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

그리고 각 엘리먼트를 보기 편하도록 parentchild 클래스에 간단한 스타일을 적용하였습니다.

.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;
}

topleft 속성값을 각각 010px로 수동 지정해주면,

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

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

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

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

그러면, positioning context가 전체 화면(viewport)에서 부모 엘리먼트로 변경되어, topleft 속성이 적용 됨을 알 수 있습니다.

마치면서

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

관련 포스트

참고