CSS 레이아웃 - z-색인 속성
z-index속성은 요소의 스택 순서를 지정합니다 .
Z-색인 속성
요소가 배치되면 다른 요소와 겹칠 수 있습니다.
속성 은 z-index요소의 스택 순서를 지정합니다(어떤 요소가 다른 요소의 앞이나 뒤에 배치되어야 하는지).
요소는 양수 또는 음수 스택 순서를 가질 수 있습니다.
제목입니다
이미지의 z-인덱스가 -1이므로 텍스트 뒤에 배치됩니다.
예시
img
{
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
참고: 위치 지정 요소 (위치: 절대, 위치: 상대, 위치: 고정 또는 위치: 고정) 및 플렉스 항목
(디스플레이의 직계 자식인 요소: 플렉스 요소) z-index에서만 작동합니다 .
또 다른 z-색인 예
예시
여기서 스택 순서가 더 큰 요소가 항상 스택 순서가 낮은 요소 위에 있음을 알 수 있습니다.
<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-색인 없음
두 개의 배치된 요소가 지정되지 않고 서로 겹칠 경우 HTML 코드에서 마지막으로z-index
정의된 요소 가 맨 위에 표시됩니다.
예시
위와 동일한 예이지만 여기에는 z-색인이 지정되지 않습니다.
<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 속성
| Property | Description |
|---|---|
| z-index | Sets the stack order of an element |