关于stacking context和CSS z-index的总结
HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了。但是,往往在项目中发现有些情况和我们的预期不太一致。经过研究和学习,总算搞清楚了其中的关系。简单总结如下:
- 只有Positioned(Position不为static的元素)元素的z-index属性才有效
- z-index可以是负数
- 没有z-index或z-index无效的元素(参见第一条)相当于z-index为0;
- 符合某些条件(注1)的元素,浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构,stacking context也会形成一个树形结构。
- 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
- z-index 0级元素中,有stacking context的元素的叠加顺序靠前
- 以上条件不能区分时,使用DOM树中的顺序决定叠加顺序。
其中细节很多,我也不确定自己的理解都是正确的。欢迎大家指正。
另外,下面是MDN中的一系列相关文章。逐层展开,写得很清楚,各位做WEB的同学可以学习一下。
- Stacking without z-index : Default stacking rules
- Stacking and float : How floating elements are handled
- Adding z-index : Using z-index to change default stacking
- The stacking context : Notes on the stacking context
- Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
- Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
- Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
-- 2015-08-04 在和同事的沟通中,又进行了一些补充 ----------------------------------------
z-index是一个比较邪恶的东西,如果不加控制,很容易形成竞争(传说中的摁下葫芦弹起个瓢)。使用的时候应该有一些规划,不要太随意。如果你们项目使用了Less,建议定义一组常量,规定几个级别。大家都尽量想着几个级别上靠。
另外,大多数时候,其实都可以通过Dom结构的适当调整来减少z-index的使用。往往还可以实现更好的灵活性。例如:
我们知道在Web上要实现一个模态对话框,往往是通过两层div实现的,一层div覆盖全屏,阻止其他元素获得消息,一个div承载模态对话框的内容。如下:
<head>
<style>
.modal-backdrop {
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
background-color: black;
opacity: 0.6; z-index: 1000;
} .modal-dialog {
position: absolute;
width: 800px;
z-index: 1001;
}
</style>
</head>
<body>
<!-- origin web contents -->
<div class="modal-backdrop"></div>
<div class="modal-dialog">
<!-- Modal dialog content -->
</div>
</body>
这样的设计,需要两个z-index值,增加了冲突的风险。并且没有办法支持多次弹出模态对话框(第一次弹出的dialog压在了第二次弹出的backdrop的上面,但是,我们期望第二次弹出的backdrop可以遮住第一次弹出的对话框内容。)。
正确的解决方法应该如下:
<head>
<style>
.modal-backdrop {
width: 100%; height: 100%;
background-color: black;
opacity: 0.6; z-index: 1000;
} .modal-dialog {
position: absolute;
left: 0; top: 0;
right: 0; bottom: 0;
z-index: 1000;
} .modal-content {
width: 800px;
}
</style>
</head>
<body>
<!-- origin web contents -->
<div class="modal-dialog">
<div class="modal-backdrop"></div>
<div class="modal-content">
<!-- Modal dialog content -->
</div>
</div>
</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.
关于stacking context和CSS z-index的总结的更多相关文章
- CSS——关于z-index及层叠上下文(stacking context)
以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...
- 层叠上下文(The stacking context)
MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...
- 层叠上下文 Stacking Context
层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...
- CSS - 层叠上下文(The stacking context)
对 MDN 的上的例子的拓展 Root - DIV #1(z-index: 5) - DIV #2(z-index: 2) - DIV #3(z-index: 4) - DIV #4(z-index: ...
- CSS:Stacking Context
通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠.在这种情况下,只有一个渲染进程,所有元素都知道其他元素所占用的空间.z-index属性可让你在渲染内容时调整 ...
- The stacking context
文档中的层叠上下文由满足以下任意一个条件的元素形成: 1. z-index 值不为 "auto"的 绝对/相对定位. 2. position位fixed. 3. opacity 属 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
随机推荐
- N皇后问题(位运算实现)
本文参考Matrix67的位运算相关的博文. 顺道列出Matrix67的位运算及其使用技巧 (一) (二) (三) (四),很不错的文章,非常值得一看. 主要就其中的N皇后问题,给出C++位运算实现版 ...
- 安装Pomelo 时遇到的坑
一.Pomelo相关的代码地址 https://github.com/NetEase,这里面包含比较多的项目. 2. https://github.com/NetEase/pomelo/wiki/%E ...
- JS判断手机访问跳转到手机站
这里提供了六种让手机端访问网站跳转到手机端的方法: 第一种: <script> if(navigator.platform.indexOf('Win32')!=-1){ //pc //wi ...
- 数据库知识整理<五>
简单的数据查询: 5.1查询的基本结构: Sql语句:select [distinct] (* | column [alias],...) from table [where condition] [ ...
- JAVA的JNI调用
由于JNI调用C和调用C++差不多,而且C++中可以混合写C代码,所以这里主要是写关于JNI调用C++的部分. 一般步骤: 先是写普通的Java类,其中包括本地方法调用. 然后编译这个Java类,调 ...
- C++混合编程之idlcpp教程Lua篇(5)
上一篇在这 C++混合编程之idlcpp教程Lua篇(4) 第一篇在这 C++混合编程之idlcpp教程(一) 与前面的工程相似,工程LuaTutorial3中,同样加入了三个文件:LuaTutori ...
- Magicodes.WeiChat——后台JS框架封装
Magicodes.WeiChat同时也致力于提高后台开发效率,因此对在后台前端这块也做了一定的封装.我们先来说说主要的框架JS——mwc.js和mwc_elements.js.这两个JS文件位于Sc ...
- 用c#开发微信 (22) 微信商城 - 微信支付 (c#源码)
微信支付有几种支付模式:刷卡支付,扫码支付,公众号支付,APP支付.本文介绍用于在微信商城里的公众号支付. 1. 效果图 在商城里购买商品后,到支付页面: 点击上面的确认支付,转到下面微信支付页面: ...
- bigautocomplete实现联想输入,自动补全
bigautocomplete是一款Jquery插件.用它实现仿搜索引擎文本框自动补全插件功能很实用,使用也很简单,引入了插件之后写几行代码就可以实现,可以灵活设置. 先看效果图: 上图是通过ajax ...
- CI框架笔记
@update 2016-4-2 13:45:35 一.目录结构 ci_demo ├─myapp 应用主目录 │ ├─autoload.php 自定义的自动加载文件(可选) │ ├─myapp.php ...