포스트

z-index 정리

게시
By 시부시부 2 분읽는 시간

z-index란?

  • z-index는 요소의 쌓임 순서를 결정하는데 사용되며, 더 높은 z-index 값을 가진 요소는 더 앞쪽에 표시된다.
  • 더 큰 z-index 값은 더 상위에 위치하게 된다.

쓰는 방법

z-index 속성은 auto 키워드 또는 값을 사용해 지정할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 키워드 값 */
z-index: auto;

/* <integer> 값 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */

/* 전역 값 */
z-index: inherit;
z-index: initial;
z-index: unset;

속성

auto

  • 박스가 새로운 쌓임 맥락을 생성하지 않는다.
  • 현재 쌓임 맥락에서의 위치는 부모 요소와 동일하다.

  • 현재 쌓임 맥락에서의 위치로 이 값을 사용한다.
  • 또한 자신만의 쌓임 맥락을 생성하고, 해당 맥락에서 자신의 위치를 0으로 설정한다.
  • 이로 인해 자손의 z-index를 자기 외의 바깥 요소와 비교하지 않는다.

예시

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Z-index Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box red"></div>
  <div class="box blue"></div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* styles.css */
.box {
  width: 100px;
  height: 100px;
  position: absolute;
}

.red {
  background-color: red;
  z-index: 1;
}

.blue {
  background-color: blue;
  z-index: 2;
}

# 출처

frontend, JavaScript
z-index JavaScript frontend
이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.