共计 772 个字符,预计需要花费 2 分钟才能阅读完成。
第一步:基本概念。
层叠上下文是一个概念上的货色,学过编译原理的人应该对这里的上下文很分明,而层叠不过就是一个词罢了,解释一下就是,依据层叠规定决定地位的一个环境。还须要留神的一点是,具备层叠上下文的元素比一般元素要更凑近眼睛。
层叠程度也是一个概念上的货色,用大白话说就是:在一个层叠上下文的环境下,外面的元素在 z 轴上的排列程序的规定,而层叠程序就是这里说的具体规定,是实际的货色。
第二步:层叠程序。
须要记住的是,外部的层叠上下文及其子元素均受制于内部的层叠上下文,上面是层叠程序,从远到近。
- 层叠上下文 background/border;
- 负 z -index;
- block 块状盒子模型;
- float 浮动盒子;
- z-index 为 auto 或看成 0 的不依赖 z -index 的上下文;
- z-index 为 auto 或看成 0;
- 正 z -index。
第三步:产生条件。
根层叠上下文(指的是页面根元素,也就是 元素)。
定位元素与传统层叠上下文(应用了 position:absolute、position:fixed 或 position:relative 的定位元素,且 z -index 的值是数字会产生叠上下文)。
CSS3 与新时代的层叠上下文:
- 一个被设置了 display:flex 的元素蕴含的元素对其设置 z -index 为数值时其会产生层叠上下文;
- 设置了 opacity 不为 1 的元素会产生层叠上下文;
- 设置了 transform 不为 none 的元素会产生层叠上下文;
- 设置了 mix-blend-mode 不为 normal 的元素会产生层叠上下文;
- 设置了 filter 不为 none 的元素会产生层叠上下文;
- 设置了 isolation:isolate 的元素会产生层叠上下文;
- 设置了 -webkit-overflow-scrolling 的元素会产生层叠上下文(挪动端);
- 设置了 will-change 的元素会产生层叠上下文。
正文完