代码改变世界

关于stacking context和CSS z-index的总结

2015-07-30 18:08 by Colin Han, ... 阅读, ... 评论, 收藏, 编辑

HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了。但是,往往在项目中发现有些情况和我们的预期不太一致。经过研究和学习,总算搞清楚了其中的关系。简单总结如下: 

  1. 只有Positioned(Position不为static的元素)元素的z-index属性才有效
  2. z-index可以是负数
  3. 没有z-index或z-index无效的元素(参见第一条)相当于z-index为0;
  4. 符合某些条件(注1)的元素,浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构,stacking context也会形成一个树形结构。
  5. 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
  6. z-index 0级元素中,有stacking context的元素的叠加顺序靠前 
  7. 以上条件不能区分时,使用DOM树中的顺序决定叠加顺序。

其中细节很多,我也不确定自己的理解都是正确的。欢迎大家指正。

另外,下面是MDN中的一系列相关文章。逐层展开,写得很清楚,各位做WEB的同学可以学习一下。

-- 2015-08-04 在和同事的沟通中,又进行了一些补充 ----------------------------------------

z-index是一个比较邪恶的东西,如果不加控制,很容易形成竞争(传说中的摁下葫芦弹起个瓢)。使用的时候应该有一些规划,不要太随意。如果你们项目使用了Less,建议定义一组常量,规定几个级别。大家都尽量想着几个级别上靠。 

另外,大多数时候,其实都可以通过Dom结构的适当调整来减少z-index的使用。往往还可以实现更好的灵活性。例如:

我们知道在Web上要实现一个模态对话框,往往是通过两层div实现的,一层div覆盖全屏,阻止其他元素获得消息,一个div承载模态对话框的内容。如下:

 1 <head>
 2     <style>
 3         .modal-backdrop {
 4             position: absolute;
 5             left: 0; top: 0;
 6             right: 0; bottom: 0;
 7             background-color: black;
 8             opacity: 0.6; z-index: 1000;
 9         }
10 
11         .modal-dialog {
12             position: absolute;
13             width: 800px;
14             z-index: 1001;
15         }
16     </style>
17 </head>
18 <body>
19     <!-- origin web contents -->
20     <div class="modal-backdrop"></div>
21     <div class="modal-dialog">
22         <!-- Modal dialog content -->
23     </div>
24 </body>

这样的设计,需要两个z-index值,增加了冲突的风险。并且没有办法支持多次弹出模态对话框(第一次弹出的dialog压在了第二次弹出的backdrop的上面,但是,我们期望第二次弹出的backdrop可以遮住第一次弹出的对话框内容。)。

正确的解决方法应该如下:

 1 <head>
 2     <style>
 3         .modal-backdrop {
 4             width: 100%; height: 100%;
 5             background-color: black;
 6             opacity: 0.6; z-index: 1000;
 7         }
 8 
 9         .modal-dialog {
10             position: absolute;
11             left: 0; top: 0;
12             right: 0; bottom: 0;
13             z-index: 1000;
14         }
15 
16         .modal-content {
17             width: 800px;
18         }
19     </style>
20 </head>
21 <body>
22     <!-- origin web contents -->
23     <div class="modal-dialog">
24         <div class="modal-backdrop"></div>
25         <div class="modal-content">
26             <!-- Modal dialog content -->
27         </div>
28     </div>
29 </body>

通过增加了一层Dom结构,只需要使用一个z-index,而且,多次弹出的时候,后面的backdrop可以很好的覆盖前面的对话框内容。

 

-- 2015-09-21 发现一个细节点 ----------------------------------------

4. 符合某些条件的元素,浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构,stacking context也会形成一个树形结构。

注1:Element with transform, Element with opacity等条件中的Element如果Display是inline的,不会创建Stacking context。因此,往往需要将他们的display改为inline-block.