当前位置: 首页 > Web前端 > CSS

理解CSS中的层叠上下文和层叠顺序

时间:2023-03-30 22:13:20 CSS

什么是层叠上下文?可以理解为一个dom节点在Z轴上优于其他节点。它的特点和BFC类似,就是不管stackingcontext的内部子元素怎么铺天盖地,都不会被推翻。影响外部因素。CSS2中创建堆叠上下文的两种方法(参考MDN)根元素(HTML)绝对(absolute)定位或relative(相对)定位且z-index值不是“auto”CSS3新8种方法(参考MDN)一个flex元素(flexitem),z-index值不为"auto",即父元素display:flex|inline-flex元素的opacity属性值小于1(参考:thespecificationforopacity)元素的transform属性值不是“none”元素的mix-blend-mode属性值不是“normal”元素的isolation属性设置为“isolate”在移动WebKit和Chrome22+核心浏览器中,position:fixedalways创建一个新的Stackingcontext,即使z-index值为“auto”changeProperty)元素的-webkit-overflow-scrolling属性设置为“touch”什么是堆叠水平?堆叠层级决定了同一堆叠上下文中元素在z轴上的显示顺序(stackingorder),也就是说,普通元素的堆叠水平优先级由堆叠上下文决定。层叠顺序(不包括CSS3属性)注:以上仅适用于同级上下文的层叠顺序示例。CSS2级联上下文演示的级联顺序。级联上下文的不透明度影响级联顺序。验证受css中不透明度影响的级联上下文的级联顺序。Demo级联准则:谁的级联等级高谁赢:当有明显的级联等级标记时(即上面的级联时序图),在同一个级联上下文中,级联等级值大的覆盖小的。Latetotop:当元素具有相同的堆叠级别和相同的堆叠顺序时,DOM流中靠后的元素将覆盖前面的元素。结论属于同一层叠上下文的元素(无论是结构上的兄弟姐妹、父子,甚至是孙辈)都遵循上述的层叠顺序;不同层叠上下文之间,层级较大的层叠上下文元素及其内部元素位于层级较小的层叠上下文元素及其内部元素之上;不同的stackingcontext是相互独立的;堆叠上下文可以嵌套,内部规则不影响外部规则。相关链接MDN:Thestackingcontext深入理解CSS中的stackingcontext和stackingorderCSSstackingorder探索层的显示