前记:之前使用z-index不生效是因为没有弄懂z-index比较的原理
我的总结:
1.需要比较z-index的元素postion属性必须都是非static属性
2.必须是兄弟节点才能通过调节z-index比较,值越大越靠近用户屏幕
上代码:
css
<style type="text/css">
.page{
}
.layer{
background-color:red;
width:200px;
height:200px;
color:white;
text-align:center;
z-index:2;
position: absolute;
}
.first{
background-color:blue;
width:200px;
height:200px;
color:white;
text-align:center;
z-index:1;
position: relative;
}
.second{
background-color:green;
width:200px;
height:200px;
color:white;
text-align:center;
}
</style>
html
<body>
目标是让层元素盖住第一块
<div class='page'>
<div class="layer">层元素</div>
<div class="first">第一块</div>
<div class="second">第二块</div>
</div>
</body>