z-index
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CSS z-index
속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index
값을 가진 요소가 작은 값의 요소 위를 덮습니다.
시도해보기
위치 지정 요소(position
이 static
외의 다른 값인 요소)의 박스에 대해, z-index
속성은 다음 항목을 지정합니다.
- 현재 쌓임 맥락에서 자신의 위치.
- 자신만의 쌓임 맥락 생성 여부.
구문
값
형식 구문
예제
HTML
html
<div class="dashed-box">
Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
CSS
css
.dashed-box {
position: relative;
z-index: 1;
border: dashed;
height: 8em;
margin-bottom: 1em;
margin-top: 2em;
}
.gold-box {
position: absolute;
z-index: 3; /* put .gold-box above .green-box and .dashed-box */
background: gold;
width: 80%;
left: 60px;
top: 3em;
}
.green-box {
position: absolute;
z-index: 2; /* put .green-box above .dashed-box */
background: lightgreen;
width: 20%;
left: 65%;
top: -25px;
height: 7em;
opacity: 0.9;
}
결과
명세
Specification |
---|
Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |
초기값 | auto |
---|---|
적용대상 | positioned elements |
상속 | no |
계산 값 | as specified |
Animation type | an integer |
Creates stacking context | yes |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- CSS
position
속성 - CSS z-index 이해하기