UC知道请问css的z-index的问题?
来源：百度知道 编辑：UC知道 时间：2024/05/30 01:22:26
请问css的z-index的问题?
<style>
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:20px;
top:30px;
z-index:1
}
#block2{
background-color:#ffc24c;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:40px;
top:50px;
z-index:1
}
#block3{
background-color:#c7ff9d;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:60px;
top:70px;
z-index:0
}
</style>
<body>
<div id="block1">aaaaaaa</div>
<div id="block2">bbbbbbb</div>
<div id="block3">ccccccc</div>
</body>
急,请问一个z-index的问题?
书上说z-index 值大的会在值小的上方,那么block1和block2的z-index同时为1的时候,为什么
block2会盖在block1的上面?
第二个问题,如果把block2的z-index改成0和block3的z-index:0一样的话,为什么block3会盖在
<style>
#block1{
background-color:#fff0ac;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:20px;
top:30px;
z-index:1
}
#block2{
background-color:#ffc24c;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:40px;
top:50px;
z-index:1
}
#block3{
background-color:#c7ff9d;
border:1px dashed #000000;
padding:10px;
position:absolute;
left:60px;
top:70px;
z-index:0
}
</style>
<body>
<div id="block1">aaaaaaa</div>
<div id="block2">bbbbbbb</div>
<div id="block3">ccccccc</div>
</body>
急,请问一个z-index的问题?
书上说z-index 值大的会在值小的上方,那么block1和block2的z-index同时为1的时候,为什么
block2会盖在block1的上面?
第二个问题,如果把block2的z-index改成0和block3的z-index:0一样的话,为什么block3会盖在
z-index属性：较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
因此，在z-index属性值相同的情况下，后声明的会覆盖先前声明的标签；
z-index属性：较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。