CSS 겹침 요소 배치 position

CSS로 겹치는 요소들을 배치하는 방법에 대해 알아보자.

CSS position

문서상의 요소를 배치하는 방법을 지정하는 속성으로, 복잡한 레이아웃을 구성할 때 매우 유용하게 사용된다.

static

"정적인, 고정된"이라는 의미로 HTML을 작성한 순서대로 정상적인 흐름에 따라 위치가 지정된다.
position 속성의 기본값이다.

p {
  position: static;
  width: 100px;
  height: 100px;
  border: 2px solid black;
}

relative

"상대적인"이라는 의미로, 해당 요소가 원래 있어야 할 위치를 기준으로 내부 요소를 상대적으로 위치를 조정할 수 있다.
또한 relative 값을 적용한 요소는 다른 콘텐츠들의 위치에 영향을 미치지 않으면서 자신의 위치를 조정할 수 있다.

p {
  position: relative;
  left: 20px;
  top: 20px;
  border: 2px solid red;
  width: 100px;
  height: 100px;
}

absolute

해당 요소를 절대적인 위치로 배치할 수 있으며, 가장 가까운 조상 중 position 속성이 static이 아닌 요소를 기준으로 위치를 잡는다.
absolute 값을 적용한 요소는 일반적인 문서의 흐름에서 제거되어 독립적으로 위치를 잡는다.

div {
  position: relative;
  width: 100px;
  height: 100px;
  border: 2px solid black;
}
p {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border: 2px solid blue;
  width: 10px;
  height: 10px;
}

fixed

요소를 뷰포트(브라우저 창)를 기준으로 고정 위치에 배치하며, 스크롤을 해도 화면의 같은 위치에 고정되어 있다.
fixed 값을 적용한 요소 역시 일반적인 문서 흐름에서 제거된다.

div {
  position: fixed;
  top: 20px;
  right: 20px;
  border: 2px solid green;
}

sticky

스크롤 위치에 따라 relative와 fixed 사이를 전환하는 특별한 속성값으로, 스크롤하기 전에는 relative처럼 동작하다가, 지정된 임계점에 도달하면 fixed처럼 동작한다.
스크롤되는 가장 가까운 상위요소를 기준으로 고정 위치에 배치한다.

p {
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 10px;
  margin: 10px 0;
}

z-index

요소가 겹쳤을 때 더 앞에 보이도록 설정할 수 있는 속성이다.

요소 쌓임맥락(Stacking Context)

웹 페이지에서 HTML 요소들이 3차원적으로 어떻게 배치되고 겹쳐질지를 결정하는 개념적인 공간을 말한다.
종이를 겹겹이 쌓아놓은 것처럼, 웹 페이지의 요소들도 사용자의 시점에서 보았을 때 어떤 요소는 위에 보이고 어떤 요소는 아래에 보인다.
요소 쌓임맥락은 이를 결정하는 규칙이다.

요소 쌓임맥락은 웹 페이지의 최상위 요소인 HTML 태그에서 자동으로 생성되며, 이는 전체 페이지의 기본 쌓임맥락이 된다.
또한 position 속성이 fixed나 sticky로 설정된 요소는 다른 요소들과는 별개로 독립적인 레이어를 형성하게 되어 새로운 쌓임맥락이 만들어진다.

이와 같이 여러개의 쌓임 맥작이 만들어질 때 사용하는 것이 z-index 속성이다.
z-index는 요소의 쌓임 순서(stacking order)를 결정하며, 어떤 요소가 다른 요소 위에 나타날지를 제어한다.
즉, 여러개의 겹쳐진 종이(요소)들을 어떤 순서로 겹쳐둘지를 정할 수 있다.

z-index의 기본 특성

static을 제외한 position 속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며, z-index 값이 더 큰 요소가 값이 작은 요소의 위를 덮는다.

단, 부모가 z-index를 높여 자식 앞으로 나올 수 없으며, 자식은 z-index를 낮춰 부모 뒤로 가는 것이 가능하다.

<!-- index.html -->
<div class="container">
  <div class="box red">Red Box</div>
  <div class="box green">Green Box</div>
  <div class="box blue">Blue Box</div>
</div>

/* style.css */
.container {
  position: relative;
  height: 200px;
}
.box {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.red {
  background-color: rgba(255, 0, 0, 0.8);
  top: 40px;
  left: 40px;
  z-index: 3;
}
.green {
  background-color: rgba(0, 255, 0, 0.8);
  top: 80px;
  left: 80px;
  z-index: 5;
}
.blue {
  background-color: rgba(0, 0, 255, 0.8);
  top: 120px;
  left: 120px;
  z-index: 1;
}

red 박스가 가장 위에 있고, blue 박스가 그 다음, green 박스가 가장 아래에 있다.

정리

1. position이 static 외의 값을 가진 박스에 대하여 z축의 위치를 지정하며, 값이 클수록 제일 위로 배치된다.
2. 부모가 z-index를 높여 자식 앞으로 나올 수 없다.
3. 자식은 z-index를 음수값으로 주어 부모 뒤로 갈 수 있다.
4. 부모 요소의 z-index가 낮으면 자식의 z-index가 아무리 높아도 한계가 있다.
5. 유지보수를 위해 10이나 100 단위로 작업하면 좋다. (주로 100단위를 많이 사용)

주의할 점

position 속성을 사용할 때는 되도록 요소들이 서로 겹치거나 가려지지 않도록 주의해야 한다.
겹치게 되는 경우 z-index를 사용하여 위로 올라올 요소를 지정할 수 있다.