여러 HTML 요소 간 위치 지정

z-index 속성을 이용하면 HTML 요소의 층 높이를 정의할 수 있습니다.

z-index와 겹침

z-index : HTML 요소들 사이의 "층 높이"를 정의합니다. HTML 요소는 z-index 숫자만큼 위에 있게 됩니다.

만약 두 박스가 겹치게 되면 z-index가 높은 박스가 위에 표시됩니다. z-index 숫자가 같으면, 코드 순서에 따라 뒤에 정의된 요소가 위로 올라옵니다.

예를 들어, z-index가 1인 요소는 z-index가 2인 요소보다 아래에 있게 됩니다.

복사
.box1 {
  position: absolute;
  z-index: 1;
}

.box2 {
  position: absolute;
  z-index: 2;
}

여기서 z-index가 2인 box2는 z-index가 1인 box1 위에 위치합니다.

absolute와 relative 활용

position: absolute는 요소는 위치 속성이 기본값 position: static이 아닌 부모 요소를 기준으로 절대적인 위치를 갖습니다.

예를 들어 position: absolute, top: 10px를 사용한 자식 요소는 부모 요소의 상단으로부터 10px 떨어진 위치에 배치됩니다.

position: relative는 요소를 기존 위치에서 상대적으로 이동시킵니다.

복사
<div class="container">
  <div class="small-box">Small Box</div>
</div>

복사
.container {
  position: relative; /* 상대적 위치를 갖는 부모 요소 */
}

.small-box {
  position: absolute; /* 부모 요소를 기준으로 절대적인 위치 지정 */
  top: 10px; /* 부모 요소의 상단으로부터 10px 떨어진 위치 */
  left: 20px; /* 부모 요소의 왼쪽으로부터 20px 떨어진 위치 */
}

위 코드에서 .small-box를 사용한 div는 .container를 사용한 div 내에서 절대적 위치로 지정됩니다.

즉 .small-box는 .container의 왼쪽 상단 모서리로부터 오른쪽으로 20px, 아래로 10px 떨어진 위치에 배치됩니다.

코드의 별표로 강조된 부분을 따라 입력해 보세요.