如果都没有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>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
运行结果：
由于box2在box1后面，在没有设置z-index的情况下，box2会压住box1。
接下来我们来看一下什么是从父现象？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{
position: relative;
width: 200px;
height: 200px;
background-color: blue;
z-index: 10
}
.div1 .child1{
position: absolute;
width: 100px;
height: 100px;
top: 240px;
left: 300px;
z-index: 56;
background-color: green;
}
.div2{
position: relative;
width: 200px;
height: 200px;
background-color:red;
z-index: 20;
}
.div2 .child2{
position: absolute;
width: 100px;
height: 100px;
top: 100px;
left: 350px;
z-index: 5;
background-color: pink;
}
</style>
</head>
<body>
<div class="div1">
<div class="child1"></div>
</div>
<div class="div2">
<div class="child2"></div>
</div>
</body>
</html>
运行结果：
这里我们设置div2的z-index小于div1的z-index，设置的div1的子元素child1的z-index大于div2的子元素child2的z-index。但最后运行的结果是child2压住child1。这就是从父现象。也就是说如果父元素被压住了。子元素也逃不了被压住的命运。无论子元素的z-index的大小。
4805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
