728x90
반응형
1. z-index
: 앞과 뒤에 나타나는 요소를 결정함
- 기본 z-index는 0
- z-index가 더 높은 요소는 더 낮은 요소 앞에 나타남 (음수도 가능)
- 순서 값이 없을 경우 코드상 순서에 따라 쌓임
- position: static스타일을 가진 요소는 항상 뒤에 나타남 (z-index 효과 X)
- 부모에게 z-index값을 줄 경우 부모끼리 먼저 순위를 정한 뒤 자식이 적용됨
2. Z-index가 없는 경우의 쌓임 우선순위
1) Root 엘리먼트의 배경과 테두리
2) 자식 엘리먼트들은 HTML에서 등장하는 순서대로
3) position이 지정된 자식 엘리먼트들은 HTMl에서 등장하는 순서대로
3. Z-index가 있는 경우 쌓임
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
opacity: 0.7;
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#normdiv1{
z-index: 8;
height: 70px;
border: 1px dashed #999966;
margin: 0px 50px 0px 50px;
text-align: center;
background-color: #ffffcc;
}
#reldiv1 {
z-index: 3;
height: 100px;
position: relative;
top: 30px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0 px 50px 0px 50px;
text-align: center;
}
#reldiv2 {
z-index: 2;
height: 100px;
position: relative;
top: 15px;
border: 1px dashed #669966;
background-color: #ccffcc;
margin: 0 px 50px 0px 50px;
text-align: center;
}
#absdiv1 {
z-index: 5;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#absdiv2 {
z-index: 1;
position: absolute;
width: 150px;
height: 350px;
top: 10px;
right: 10px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
</style>
</head>
<body>
<div id="absdiv1">
<br><span class="bold">DIV #1</span>
<br>position: absolute;
<br>z-index: 5;
</div>
<div id="reldiv1">
<br><span class="bold">DIV #2</span>
<br>position: relative;
<br>z-index: 3;
</div>
<div id="reldiv2">
<br><span class="bold">DIV #3</span>
<br>position: relative;
<br>z-index: 2;
</div>
<div id="absdiv2">
<br><span class="bold">DIV #4</span>
<br>position: absolute;
<br>z-index: 1;
</div>
<div id="normdiv1">
<br><span class="bold">DIV #5</span>
<br>no positioning;
<br>z-index: 8;
</div>
</body>
</html>728x90
반응형
'Frontend > HTML & CSS' 카테고리의 다른 글
| [HTML&CSS] 14강 CSS 적용 우선 순위 (0) | 2025.03.20 |
|---|---|
| [HTML&CSS] 13강 Media Query (0) | 2025.03.19 |
| [HTML&CSS] 11강 Position CSS (0) | 2025.03.17 |
| [HTML&CSS] 10강 Grid CSS (0) | 2025.03.16 |
| [HTML&CSS] 9강 Flexbox Item 총정리 (0) | 2025.03.15 |
