你真的理解z-index吗?


一、前言                               假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间...
一、前言                              

  假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好,那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。本文作为对W3C Recommendation-Layered presentation学习后整理的笔记,以便日后查阅。

  由于将英文名词翻译为中文名词容易产生歧义(如Normal flow被翻译为文档流),因此本文将直接采用原英文名词,而涉及到的英文名词解释如下:

  non-positioned element:无CSS定位的元素,也就是position: static的元素。

  positioned element:CSS定位的元素,也就是position: relative/float/absolute的元素。

  box:文档树由element组成,渲染树由box组成,实际进行元素大小、布局渲染操作的对象是box进行而不是element。box由element对应生成(也有是anonymous box不是由element对应生成,而是渲染器根据规则自动生成),non-positioned element对应的是non-position box,positioned element对应的是position box。


  z-axis:box定位坐标系中的z轴。


  stacking context:层叠上下文,z-axis的基本组成单位。box与stacking context的映射关系为N:1。每个stacking context有一个父context(除了root stacking context外)和0~N个子context。


  root stacking context:与根box(html/body对应的box)对应的层叠上下文,是其他stacking context的祖先context,root stacking context的范围覆盖整条z-axis。


  stack level:层叠等级,当N个box位于同一个stacking context中,则通过stack level来决定它们位于z-axis上的位置。注意:stack level为相对值而非如px那样为绝对值。



二、图解分层显示                                                                         


  其实我们常接触到的z-index只是分层显示中的一个属性而已,而理解z-index背后的原理实质上就是要理解分层显示原理。下面我们通过一个示例来认识一下分层显示涉及的对象和属性(z-axis、(root) stacking context、box、stack level)以及它们之间的关系。


HTML Markup
  1. <style type="text/css">
  2.   div{position:relative;}
  3. </style>
  4. <body>
  5.   <div id="d1" style="z-index:10;">
  6.     <div id="d4" style="z-index:-9999;"></div>
  7.   </div>
  8.   <div id="d2" style="z-index:8;"></div>
  9.   <div id="d3" style="z-index:9;"></div>
  10.   <p id="p1"><p>
  11. </body>
复制代码



说明:


      1. 在构造渲染树时会为element生成对应的box,所以div#d1->d1:box,div#d2->d2:box,div#d3->d3:box,div#d4->d4:box,p#p1->p1:box。


      2. 对于positioned box而言,若z-index属性值不是0,则会创建一个新的stacking context,并且其子孙box将属于这个新stacking context。


      3. 同一个stacking context的z-index才具有可比性,也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。如示例般,虽然-9999比10小,但由于d4:box和d1:box位于不同的stacking context,因此无法判断哪个box更靠近用户。



三、层叠规则                          


  层叠规则就是决定到底哪个box更靠近用户。


  1. 前提:boxes属于同一个stacking context,并且z-index相同


      规则:按照box对应的element在文档树的顺序,后者比前者更靠近用户(back-to-front)


  1. <!-- 两种情况下,d2均排在d1的后面,因此d2在z-axis上位于d1的上面 -->
  2. <div id="d1">
  3.   <div id="d2">
  4.   </div>

更多 context 相关资讯

CSS3火焰文字特效制作教程

CSS3火焰文字特效制作教程

用一句很俗气的话概括这两天的情况就是:“最近很忙”,虽然手头上有不少很酷的HTML5和CSS3资源,但确实没时间将它们的实现过程写成教程分享给大家。今天刚完成了一个神

更多 element 相关资讯

更多 background 相关资讯

整理 W3CSchool 常用的CSS属性列表

  近期教学给学员总结常用的CSS属性,方便学习查询,正好发上来也给大家分享一下,O(∩_∩)O。   摘选自:http://www.w3cschool.com.cn/   表格最右列的数字标识支持的CSS

CSS设置DIV背景色渐变显示

<style type="text/css"> .linear{ width:100%; height:600px; FILTER: progid:DXImageTransform.Microsoft.Gradi

一款纯css3实现的颜色渐变按钮

一款纯css3实现的颜色渐变按钮

之前为大家分享了推荐10款纯css3实现的实用按钮,今天给大家带来一款纯css3实现的颜色渐变按钮。这款按钮的边框和文字的颜色通过css3实现两种颜色的渐变,效果非常好看,

一款非常棒的纯CSS3 3D菜单演示及制作教程

一款非常棒的纯CSS3 3D菜单演示及制作教程

这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码。下面

CSS渐变色效果的实现方法与效果演示

通过CSS border-radius,我向大家展示了如何实现方形元素的圆角效果,这解决了以前美工画出这种效果而开发人员无法实现的问题。CSS渐变色(Gradients)也是一个类似的技术

纯CSS3实现的顶部社会化分享按钮

纯CSS3实现的顶部社会化分享按钮

今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便。这些社会化分享按钮的图标文件来自goog

一款CSS3仿Google Play的垂直菜单

一款CSS3仿Google Play的垂直菜单

之前分享过一款非常酷的CSS3垂直下拉动画菜单,是多级菜单。今天我们来看一款也是用CSS3制作的垂直菜单,是仿Google Play的菜单,菜单项都带有可爱的小图标,可以先来看看

超可爱 纯CSS3实现的小猪、小老鼠、小牛

利用纯CSS3绘制一些人物、动物、风景已经不是一件新鲜的事情了,主要是利用CSS3可以让直线变成任意的曲线,于是简单的矢量图形绘制对CSS3来说就小菜一碟了。今天要分享

效果非常酷!纯CSS3实现的图片滑块程序

效果非常酷!纯CSS3实现的图片滑块程序

之前我们经常会看到很多利用jQuery实现的焦点图插件,种类太多了,今天我想给大家分享一款利用纯CSS3实现的图片滑块应用,完全是利用CSS3的相关特性,没有使用JS,个人觉得

支持中文的CSS类名

支持中文的CSS类名

CSS类名的结构性和统一性非常的重要,有些程序员喜欢使用首字母大写,有些喜欢用连接线,有些喜欢用下划线。最近我发现的一个非常有意思的东西是,在HTML和CSS里,你可以用Un