css3创建层叠上下文以及挑战css2.1规则

Posted 2021-04-09 前端开发知识札记

前端:出发层叠上下文的css属性,3大类,html根元素解释了决定定位在没有明显的定位元素限制时,以浏览器窗口进行定位.z-index为数值的定位元素创建层叠上下文.7大css3属相也是能够触发层叠上下文的.层叠上下文具有5大特性,分别是比1.普通元素层叠水平高,2.层叠上下文能够嵌套,内部嵌套层叠上下文及子元素均受限于外部的层叠上下文,3.层叠上下文独立兄弟元素,渲染变化的时候,只有层叠上下文的子元素受影响,4.层叠上下文自称体系,层叠上下文发生层叠是,这个元素被认为是在父层叠上下文中的层叠顺序.5层叠上下文阻断元素混合模式.

css3触发层叠上下文:

一,父容器display:flex和z-index为数值子元素,子元素边层叠上下文

具备2个条件:1,父容器display:flex+2.子元素z-index为数值,且

.box{display:flex;}

.box > div{background-color: lightblue;z-index:1;width:200px;}

.box > div > img{position:relative;z-index:-1;right:-150px;}

<div class="box">

<div>

<img alt="">

</div>

</div>

二,opacity与层叠上下文

属性透明具有层叠上下文.只要opacity不是1;0完全透明1不透明

.box{background-color: lightblue;width: 200px;opacity:0.5;}

.box > img{position:relative;z-index:-1;right:-150px;}

<div class="box">

<img alt="">

</div>

三,transform与层叠上下文

应用了transform也具有层叠上下文

4. mix-blend-mode与层叠上下文

5. filter与层叠上下文

6. isolation:isolate与层叠上下文

7. will-change与层叠上下文

而不支持z-index的层叠上下文(css3属性)和元素天然z-index:auto级别，也就意味着，层叠上下文元素和定位元素是一个层叠顺序的，于是当他们发生层叠的时候，遵循的是“后来居上”准则。

非定位元素和非flex子元素设置z-index是无效的。

总结:层叠上下文,层叠水平,层叠顺序,一般要锁定哪些元素具有层叠上下文,哪些属性触发了层叠上下文,层叠上下文的特性.基本也就是这几个要点了.