여러 HTML 요소 간 위치 지정

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

z-index와 겹침

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

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

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

z-index 사용 예시

CSS

.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는 요소를 기존 위치에서 상대적으로 이동시킵니다.

HTML

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

CSS

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

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

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

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

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

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!

강의 등록하기로그인하기