Z-index 속성
- position 속성이 설정된 요소 중 static이 아닌 요소와 그 자손 요소의 Z축 순서를 지정한다. 즉, Z축 순서를 지정하기 위해서는 position 속성을 설정 한 후 Z-index 속성을 지정해야한다.
- 더 Z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.
- Z-index를 명시하지 않으면 문서에 가장 먼저 삽입된 요소가 Z-index:1 값을 가지며, 그 후 요소는 점점 커진다.
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
width: 150px;
height: 150px;
border: 3px dotted gray;
}
.absolute-box {
width: 100px;
height: 100px;
position: absolute;
}
.yellow {
background: yellow;
z-index: 1000;
}
.orange {
background: orange;
left: 100px;
top: 100px;
z-index: 100;
}
.green {
background: green;
left: 150px;
top: 150px;
z-index: 500;
}
.blue {
background: blue;
left: 180px;
top: 100px;
z-index: 10;
}
</style>
</head>
<body>
<h3> z-index : position 속성이 static이 아닌 요소와 그 자손의 z축 순서 지정</h3>
<div class="box yellow">static:z-index 적용안됨</div>
<div class="absolute-box orange"></div>
<div class="absolute-box green"></div>
<div class="absolute-box blue"></div>
</body>
</html>
'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0923_CSS : columns 다단 (0) | 2021.09.23 |
|---|---|
| 0923_CSS : clip (0) | 2021.09.23 |
| 0923_CSS : 포지셔닝 position (0) | 2021.09.23 |
| 0916~0917_CSS : Cascading Style Sheets(CSS) (0) | 2021.09.22 |
| 0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 (0) | 2021.09.15 |