CSS z-index
속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index
값을 가진 요소가 작은 값의 요소 위를 덮습니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
위치 지정 요소(position
이 static
외의 다른 값인 요소)의 박스에 대해, z-index
속성은 다음 항목을 지정합니다.
- 현재 쌓임 맥락에서 자신의 위치.
- 자신만의 쌓임 맥락 생성 여부.
구문
/* 키워드 값 */
z-index: auto;
/* <integer> 값 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */
/* 전역 값 */
z-index: inherit;
z-index: initial;
z-index: unset;
값
형식 구문
예제
HTML
<div class="dashed-box">Dashed box
<span class="gold-box">Gold box</span>
<span class="green-box">Green box</span>
</div>
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 | Status | Comment |
---|---|---|
CSS Transitions The definition of 'visibility' in that specification. |
Working Draft | Defines visibility as animatable. |
CSS Level 2 (Revision 1) The definition of 'z-index' in that specification. |
Recommendation | Initial specification. |
초기값 | auto |
---|---|
적용대상 | positioned elements |
상속 | no |
Computed value | as specified |
Animation type | an integer |
Creates stacking context | yes |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- CSS
position
속성 - CSS z-index 이해하기