들어가기 전에
요소의 위치를 지정하다 보면 부득이하게 두 요소가 겹쳐지게 되는 경우가 있습니다.
결국, 둘 중 하나는 다른 요소로 인해 덮어쓰게 됩니다.
이때 어느 요소가 더 위로 올라와야 하는지는 요소들의 쌓임 순서의 규칙에 따라 위치하게 됩니다.
이것을 정하는 것이 바로 z-index의 역할입니다.
쌓임 순서는 z-index 속성 값을 설정하여 바꿀 수 있습니다.
핵심키워드
- z-index
- 쌓임 순서
학습하기
6) 속성-z-index
z-index 속성
기본 값 : auto
요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성입니다.
z-index: auto | number | initial | inherit;< 속성 값 >
auto | 쌓임 순서를 부모와 동일하게 설정(기본값) |
number | 해당 수치로 쌓임 순서를 설정(음수 허용) |
z-index: 1;- position 값이 static이 아닌 경우 지정가능
- 순서 값이 없을 경우 생성순서(코드상 순서)에 따라 쌓임
- 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음
- 큰 값이 가장 위쪽(음수 사용 가능)
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.parent {
z-index: 10;
position: relative;
width: 300px;
height: 50px;
border: 2px solid #000;
background-color: #ccc;
}
.child {
z-index: 10;
position: absolute;
top: 10px;
right: 10px;
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="wrap">
<h1 class="practive_title">z-index 속성</h1>
<div class="z_area">
<div class="parent" style="z-index:11">
position: relative;
<div class="child" style="right:20px;z-index:1000;">
position: absolute;
</div>
</div>
<div class="parent" style="">
position: relative;
<div class="child">
position: absolute;
</div>
</div>
</div>
</div>
</body>
</html>
참고자료
- z-index (stacking context)
https://codepen.io
- ...
- Playit
https://www.w3schools.com
- Understanding CSS z-index
https://developer.mozilla.org
- The z-index attribute lets you adjust the order of the layering of objects when rendering content.
comment
우왕 강의 넘 좋아요
실무에서 어떻게 사용되는지 알려주시니까 이해가 더 잘됩니다. 좋은 강의 감사합니다.
순서값이 없을 경우. 생성순서대로 생김.
부모가 z-index값이 있는 경우 부모안에서 의미있음.
큰값이 가장 위쪽, 음수도 가능하다.
감사합니다.
고맙습니다.
부모 자식 관계를 예를들어 설명해주신것이 재미있었습니다 ㅋ
도움이 많이 되었습니다. 감사합니다.