z-index深入了解

如果z-index没有发生嵌套,遵循第一点就是后来居上的准则,第二点就是谁的z-index值大谁上;
如果祖先z-index发生嵌套,遵循祖先优先原则,遵循最父级元素的优先,前提是z-index的值是数值,不是auto;(z-index:auto)的值当前层叠上下文的生成盒子层叠水平是0,盒子(除非是根元素)不会创造一个新的层叠上下文
1.层叠上下文可以嵌套,组合成一个分层次的层叠上下文。
2.每个层叠上下文和兄弟元素独立:当进行层叠变化和渲染时,只需要考虑后代元素。
3.每个层叠上下文是自成体系的,当元素的内容被层叠后,整个元素被认为在浮层的层叠顺序中。

7阶层叠顺序 :规范元素重叠时的呈现规则
层叠上下文 background
z-index 为负值
3.block块状盒子
4.float盒子
5.inline/inline-block水平盒子
6.z-index:0或者看成z-index:auto不依赖z-index的层叠上下文的盒子
7.正z-index
注意:一旦容器z-index值有了数值,那么图片的层叠上下文就变成了容器
从层叠顺序来看,z-index:auto和z-index:0一样
但是从层叠上下文来看,两者有着本质区别(并不包括ie-7)
其余参与层叠上下文的属性
1.z-index值不为auto的flex项(父元素display:flex|inline-flex)
2.元素的opacity值不是1
3.元素的transform值不是none
4.元素mix-blend-mode值不是normal
5.元素的filter值不是none
6.元素的isolation值是isolate
7.position:fixed声明
8.will-change指定的属性值为上面任意一个
9.元素的-webkit-overflow-scrolling设为touch

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 1.z-index基础 z-index属性指定了元素及其子元素的[z顺序],而[z顺序]可以决定当元素发生覆盖的时...
    徐国军_plus阅读 11,522评论 1 6
  • 第一节:z-index基础 较大的z-index会覆盖较小的那个z-index元素 z-index:auto 默认...
    胖鱼尾巴阅读 4,673评论 0 0
  • z-index 与 css 定位属性 z-index 只对定位元素有作用。 如果定位元素z-index没有发生嵌套...
    soojade阅读 4,479评论 0 2
  • 1.z-index简介 (1) 概念 z-index属性指定了元素与元素之间的z轴上的顺序,而z轴决定元素之间发生...
    Bennt阅读 24,187评论 2 10