css z-index的分析

今天做游戏的背景时分析得出的结论,你可能不知道的特别之处

dom元素默认的 z-index 是 0。Z-index 1 拥有更高的优先级。z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

但是如果2个div同时z-index为0时谁会覆盖谁呢?看看下面效果:

<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:0;
width:100px;
height:100px;
background:green;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:0;
width:100px;
height:100px;
background:red;
}
</style>
</head>

<body>
<div id="div1"><h1>div1</h1></div>
<div id="div2"><h1>div2</h1></div>
</body>
</html>

你会发现只显示div2,交换两个div的顺序后只显示div1,由此可见,在z-index一样时,后渲染的元素会覆盖前面(后渲染效果);游戏中后来的重新渲染(添加元素或者改变样式等)也会触发后渲染效果。

下面再看看这个效果:

<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:0;
width:100px;
height:100px;
background:green;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:0;
width:100px;
height:100px;
background:red;
}
#div1-1
{
position:absolute;
left:0px;
top:0px;
z-index:2;
width:100px;
height:100px;
background:black;
}
</style>
</head>

<body>
<div id="div1"><h1>div1</h1><div id="div1-1"><h5>div1-child</h5></div></div>
<div id="div2"><h1>div2</h1><div id="div2-1"><h5>div2-child</h5></div></div>
</body>
</html>

在div1里面添加了子元素div1-1,并将其z-index设置为2很显然是大于div2的z-index的,一般的想法是div1-1应该会冒出来,结果是没有出现,个人觉得原因是z-index只对直接father才有效的,如本例中:body中的直接child 有div1和div2,这2个的z-index是相对于body而言的,故能相互比较来判断层叠顺序,而div1中的直接child有div1-1,其z-index只是相对于div1而言,故无法div1外层的比较来判断层叠顺序。

总得来说z-inde的层叠顺序覆盖判断是局限于(sibling)兄弟节点之间的。

如有异议,请不吝赐教。


你可能感兴趣的:(z-index的奇妙之处)