博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS魔法堂:你真的理解z-index吗?
阅读量:4988 次
发布时间:2019-06-12

本文共 3271 字,大约阅读时间需要 10 分钟。

一、前言                              

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

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

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

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

  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. 在构造渲染树时会为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)

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

      规则:z-index属性值大的box更靠近用户

  3. 前提:boxes属于不同的stacking context,并且stacking contexts没有祖孙/父子关系

      规则:boxes会向上沿着父box进行搜索,直到父boxes属于同一个stacking context为止,然后比较父boxes的z-index属性值,z-index属性值大的box更靠近用户。

d3
d2
d3

  4. 前提:boxes属于不同的stacking context,并且stacking contexts为祖孙/父子关系

      规则:属于子stacking context的box必定更靠近用户

  5. 前提:boxes属于相同的stacking context,并且两者都是non-positioned element。

      规则:float:left|right的元素必定更靠近用户

 

四、z-index的作用                        

  啰嗦一句:同一个stacking context的z-index才具有可比性,也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。

  它有两个作用:1. 设置box在其所属的stacking context下的stack level;

                      2. 当z-index属性值非0时,则在该box中创建一个新的stacking context,而该box的子孙box默认属于这个新stacking context。

  注意:z-index的默认值为auto,自动赋值为0。因此默认情况下不会创建新的stacking context。

  z-index生效的阀门

    z-index属性值仅对positioned box生效,而non-positioned box的z-index永远为0。

    也许你会举出如下反例:

    但抱歉的是,上面获取的是non-positioned element div#d1的z-index属性值,而不是non-positioned box的z-index属性值。

    对于positioned element,它会将z-index赋予给对应的positioned box,而non-positioned element则不会。

 

五、兼容性问题——IE6/7的诡异行为                

  IE6、7中并非当positioned box并且z-index不为0时才创建stacking context,而是positioned box就会创建stacking context。

 
20
10
2
1

  符合W3C标准的渲染效果:

  IE6、7下的渲染效果:

 

六、总结                            

  若有纰漏请大家指正,谢谢! 

  尊重原创,转载请注明来自:  ^_^肥仔John  

 

七、参考                            

《》

《》

-

转载于:https://www.cnblogs.com/fsjohnhuang/p/4333164.html

你可能感兴趣的文章
Swift 自己主动引用计数机制ARC
查看>>
使用 jackson 解析 json 演示样例
查看>>
C++内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区...
查看>>
维修U盘,那件小事
查看>>
php实现简单链式操作mysql数据库类
查看>>
JavaScript 常用正则表达式
查看>>
.FX File
查看>>
活字格Web应用平台学习笔记2-基础教程-开始
查看>>
PHP使用Zend Opcache之优化加速和缓存清理总结
查看>>
让浏览器不缓存的方法(转)
查看>>
九月13
查看>>
利用fopen/fwrite手动实现文件拷贝copy功能
查看>>
2016/06/02学习记录
查看>>
周记 2016.5.31
查看>>
hdu 4081 Qin Shi Huang's National Road System(最小生成树+dp)2011 Asia Beijing Regional Contest...
查看>>
python基础知识之文件操作
查看>>
Torque2D MIT 学习笔记(1) ---- 了解
查看>>
如何通过命令行使用Wisdom RESTClient?
查看>>
class样式实现个人签名,一定字数后省略号取代后面内容
查看>>
设计模式之组合模式
查看>>