CSS 레이아웃 - z-index 속성

z-index 属性指定元素的堆叠顺序。

z-index 属性

当元素被定位时，它们可能会与其他元素重叠。

z-index 属性指定元素的堆叠顺序（哪个元素应该放在前面，哪个元素应该放在后面）。

元素的堆叠顺序可以是正数或负数：

这是一个标题

因为图像的 z-index 值为 -1，因此它将被放置在文本后面。

예제

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

직접 시험해 보세요

주의:z-index 적용됩니다정위치 요소（position: absolute、position: relative、position: fixed 또는 position: sticky）과활성화 요소（display: flex 요소의 직접 자식 요소）。

另一个 z-index 实例

예제

여기서, 더 큰 스택 순서를 가진 요소가 항상 더 작은 스택 순서를 가진 요소 위에 위치합니다:

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

직접 시험해 보세요

z-index가 없는 경우

두 개의 위치 지정 요소가 지정하지 않은 경우 z-index 의 경우 겹치게 됩니다HTML 코드에서 마지막으로 정의된요소가 가장 위에 표시됩니다.

예제

위의 예제와 동일하지만, 여기서는 지정하지 않았습니다 z-index：

<html>
<head>
<style>
.container {
  position: relative;
}
.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}
.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}
.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>
<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>
</body>
</html>

직접 시험해 보세요

CSS 속성

속성 설명
z-index 요소의 스택 순서를 설정합니다.