css z-index的分析

最新推荐文章于 2025-09-10 17:59:49 发布

转载最新推荐文章于 2025-09-10 17:59:49 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wizardpisces/blog/288475

文章标签：

#python

本文详细解析游戏开发中z-index属性的使用，包括元素的堆叠顺序、渲染顺序对层叠顺序的影响，以及如何正确理解在相同z-index下元素的覆盖规则。通过实例演示，揭示在不同顺序渲染下的元素展示效果，帮助开发者更好地掌握这一关键概念。

2019独角兽企业重金招聘Python工程师标准>>>

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

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)兄弟节点之间的。

如有异议，请不吝赐教。

转载于:https://my.oschina.net/wizardpisces/blog/288475