z-index学习

本是古典何须时尚 2022-08-23 05:43 6阅读 0赞

看了z-index，写个总结；  
这些资源：  
1. 深入理解CSS中的层叠上下文和层叠顺序:[http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/][http_www.zhangxinxu.com_wordpress_2016_01_understand-css-stacking-context-order-z-index]  
2. CSS深入理解之z-indexh ：ttp://www.imooc.com/learn/643  
3. What You May Not Know About the Z-Index Property:[http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property–webdesign-16892][http_webdesign.tutsplus.com_articles_what-you-may-not-know-about-the-z-index-property_webdesign-16892]  
4. Elaborate description of Stacking Contexts: [https://www.w3.org/TR/CSS2/zindex.html][https_www.w3.org_TR_CSS2_zindex.html]

1.  层叠上下文和z-index不是一回事。

> 对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）（目前，也就是2016年初是这样）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。

2.Stacking Order  
![这里写图片描述][20160608143744578]

> What’s also interesting is that non-positioned elements are located at  
> four different stacking levels. It makes sense when you think about  
> it. If all non-positioned elements were at the same stacking level, we  
> wouldn’t see text (inline box) on top of a div (block level box).

有趣的是前四层是没有任何定位属性的元素。不过你这么想就能想通了。如果没有定位属性的元素都在同一个level，那我们就看不到在div(block level box)顶层的text(inlinebox box)了。

3.务必牢记的层叠准则

> 下面这两个是层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：  
> 谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。通俗讲就是官大的压死官小的。  
> 后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

4.层叠上下文元素有如下特性：

> 层叠上下文的层叠水平要比普通元素高（原因后面会说明）；  
> 层叠上下文可以阻断元素的混合模式（见此文第二部分说明）；  
> 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。  
> 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。  
> 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。.

5.CSS3与新时代的层叠上下文

> z-index值不为auto的flex项(父元素display:flex|inline-flex).  
> 元素的opacity值不是1.  
> 元素的transform值不是none.  
> 元素mix-blend-mode值不是normal.  
> 元素的filter值不是none.  
> 元素的isolation值是isolate.  
> will-change指定的属性值为上面任意一个。  
> 元素的-webkit-overflow-scrolling设为touch.

z-index 会找父级层叠上下文，直到body

[http_www.zhangxinxu.com_wordpress_2016_01_understand-css-stacking-context-order-z-index]: http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
[http_webdesign.tutsplus.com_articles_what-you-may-not-know-about-the-z-index-property_webdesign-16892]: http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
[https_www.w3.org_TR_CSS2_zindex.html]: https://www.w3.org/TR/CSS2/zindex.html
[20160608143744578]: /images/20220721/3d63ef407e5049dfa585fb4336506f08.png