CSS의 z-index에 대한 자세한 설명(2)-CSS 튜토리얼-php.cn

CSS의 z-index에 대한 자세한 설명(2)

零下一度

풀어 주다： 2017-05-12 14:15:50

원래의

1560명이 탐색했습니다.

CSS의 z-index에 대한 자세한 설명. z-index가 없으면 결과는 어떻게 되나요? 편집자가 여러분을 살펴보도록 안내할 것입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
position: absolute;
width: 100px;
height: 100px;
background-color: red;
top: 100px;
left: 100px;
}
.box2{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
top: 180px;
left: 180px;
}
</style>
</head>
<body>
<p class="box1">box1</p>
<p class="box2">box2</p>
</body>
</html>

로그인 후 복사

실행 결과:

CSS의 z-index에 대한 자세한 설명(2)

box2가 box1 뒤에 있으므로 box2는 z-index를 설정하지 않고 box1을 억제합니다.

다음으로 부모현상이 무엇인지 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.p1{
position: relative;
width: 200px;
height: 200px;
background-color: blue;
z-index: 10
}
.p1 .child1{
position: absolute;
width: 100px;
height: 100px;
top: 240px;
left: 300px;
z-index: 56;
background-color: green;
}
.p2{
position: relative;
width: 200px;
height: 200px;
background-color:red;
z-index: 20;
}
.p2 .child2{
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 350px;
z-index: 5;
background-color: pink;
}
 
 
</style>
</head>
<body>
<p class="p1">
<p class="child1"></p>
</p>
<p class="p2">
<p class="child2"></p>
</p>
</body>
</html>

로그인 후 복사

실행 결과:

CSS의 z-index에 대한 자세한 설명(2)

여기서 p2의 z-index를 p1의 z-index보다 작게 설정하고 z-index를 설정합니다. p1의 하위 요소 child1의 인덱스 인덱스는 p2의 하위 요소인 child2의 z-index보다 큽니다. 그러나 작업의 최종 결과는 child2가 child1을 억제한다는 것입니다. 이것이 아버지께 순종하는 현상이다. 이는 상위 요소가 억제된 경우입니다. 하위 요소는 억압되는 운명을 피할 수 없습니다. 하위 요소의 Z-색인 크기에 관계없이.

【관련 추천】

1. 무료 CSS 온라인 동영상 튜토리얼

CSS 온라인 매뉴얼

3. php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼

위 내용은 CSS의 z-index에 대한 자세한 설명(2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!