CSS z-index 속성

z-index 속성은 요소의 스택 순서를 지정한다.

CSS z-index 속성

요소가 배치되면 다른 요소와 겹칠 수 있다.

z-index 속성은 요소(다른 요소 앞 또는 뒤에 배치할 요소)의 스택 순서를 지정한다.

요소는 양 또는 음의 스택 순서를 가질 수 있다:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
</style>
</head>
<body>

<h1>이것은 제목입니다.</h1>
<img src="img_tree.png">
<p>이미지의 z 인덱스가 -1이므로 텍스트 뒤에 배치됩니다.</p>

</body>
</html>

img 요소에 position속성에는 absolute값을 left속성에는 0px, top속성에는 0px 그리고 z-index속성에는 -1값을 설정하였고, 그 결과 화면은 아래 그림과 같다. z-index가 음수이면 img 요소는 맨 뒤에 위치하게 되고 글자가 그림 위에 놓이는 효과를 볼 수 있다.

z-index속성에 1 양수 값을 설정한 결과 화면은 아래 그림과 같다. 그림이 글자 위에 배치된 것을 확인할 수 있다.

참고: z-index는 배치된 요소(위치: 절대, 위치: 상대, 위치: 고정 또는 위치: 고정) 및 플렉스 항목(디스플레이의 직접 자식 요소: 플렉스 요소)에만 작동한다.

또다른 z-index 예제

<!DOCTYPE html>
<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; /* gray box will be above both green and black box */
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2; /* green box will be above black box */
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Z-index 예제</h1>

<p>스택 순서가 큰 요소는 항상 스택 순서가 낮은 요소 위에 있습니다.</p>

<div class="container">
  <div class="black-box">검정색상자 (z-index: 1)</div>
  <div class="gray-box">회색상자 (z-index: 3)</div>
  <div class="green-box">초록색상자 (z-index: 2)</div>
</div>

</body>
</html>

black-box 클래스는 position 속성은 relative이고 z-index속성은 1값이고, border속성은 2px solid black 값이며, height속성은 100px, margin속성은 30px값을 설정하였다.

gray-box 클래스는 position 속성은 absolute이고 z-index속성은 3값이고, background-color:gray, height속성은 60px, width:70%, left속성은 50px, top 속성은 50px를 설정하였다.

green-box 클래스는 position 속성은 absolute이고 z-index속성은 2값이고, background-color:lightgreen,width:35%, left속성은 270px, top 속성은 -15px를, height속성에는 100px를 설정하였다.

그 결과 화면은 아래 그림과 같다.

CSS z-index가 없는 경우

z-index를 지정하지 않고 위치한 두 요소가 서로 겹치는 경우 HTML 코드에서 마지막으로 정의된 요소가 맨 위에 표시된다.

<!DOCTYPE html>
<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>

<h1>Overlapping elements</h1>

<p>위치한 두 요소가 z 인덱스를 지정하지 않고 서로 겹치는 경우,
HTML 코드에서 마지막으로 정의된 요소가 맨 위에 표시됩니다:</p>

<div class="container">
  <div class="black-box">검정색 상자</div>
  <div class="gray-box">회색 상자</div>
  <div class="green-box">초록색 상자</div>
</div>

</body>
</html>

위의 예제와 다른 것은 z-index가 없는 경우 상자들의 위치가 다르게 배치되는 것을 확인할 수 있으며 아래 그림과 같다.

지금까지 여러 요소들간의 순서 위치를 결정하는 z-index 속성에 관련해서 살펴보았다.

반드시 손으로 눈으로 머리로 실습하기를 추천합니다.

모두 화이팅입니다.!!!

출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.

저작자표시 비영리 변경금지

'HTML > CSS문법' 카테고리의 다른 글

CSS float와 clear (0)	2023.08.23
CSS overflow 속성 (0)	2023.08.22
CSS position 속성 (0)	2023.08.20
CSS width, max-width 속성 (0)	2023.08.19
CSS display 속성 (0)	2023.08.18

enjoyCoding

CSS z-index 속성