Z-Index
개요 : 이 속성은 위치된 요소의 z축 순서를 지정한다.
정의
|
z-index |
설명 |
|
값 |
auto | <정수> | inherit |
|
기본값 |
auto |
|
적용대상 |
위치된 요소 |
|
상속 |
안됨 |
|
백분율 |
사용 불가 |
|
미디어 |
visual |
값
|
값 |
설명 |
|
auto |
자동으로 계산 된 값을 지정한다. 부모와 동일한 값이 지정된다. |
|
정수 |
정수를 지정한다. |
|
inherit |
부모 요소의 값을 상속하도록 지정한다. |
-------------------------------------------------------------------------------------------------------
예제
View Source :
<style>
.wrap {
position: relative;
background: #000;
height: 150px;
}
.box1, .box2, .box3 { /* 3개 박스 선택자 그룹화 */
position: absolute;
height: 50px;
width: 50px;
}
.box1 {
z-index: 11;
background: red;
top: 0; left: 0; /* 기준 박스의 위와 왼쪽 경계에서부터 안쪽으로 각각 0px 떨어짐 */
}
.box2 {
z-index: 12;
background: green;
top: 25px; left: 25px; /* 기준 박스의 위와 왼쪽 경계에서부터 안쪽으로 각각 25px 떨어짐 */
}
.box3 {
z-index: 13;
background: yellow;
top: 50px; left: 50px; /* 기준 박스의 위와 왼쪽 경계에서부터 안쪽으로 각각 50px 떨어짐 */
}
</style>
<body>
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
-------------------------------------------------------------------------------------------------------------------------------Result :
