z-index 学习笔记

顺序规则

如果不设置节点的 position 属性,位于文档流后面的节点会遮盖前面的节点。

定位规则

  • 设置节点的 position: static; 位于文档流后面的节点会遮盖前面的节点。
  • 设置节点为非 static,则该节点会覆盖没有设置 position 或 position: static; 的节点。

参与规则

z-index 仅在节点的 position: relative/absolute/fixed; 时有效。

默认值规则

若所有的节点都定义了 position: relative;

  • z-index: 0; 的节点与没有设置 z-index 的节点在同一层级内没有高低之分。
  • z-index >= 1 的节点会遮盖没有设置 z-index 的节点。
  • z-index < 0 的节点会被没有定义 z-index 的节点覆盖。

从父规则

如果都设置了 position: relative;

  • 同级元素元素 A 的 z-index 大于 元素 B 的 z-index,那么 A 的子元素必定覆盖在 B 的子元素上。
  • 同级元素元素 A 的 z-index 等于 元素 B 的 z-index,则根据顺序规则,B 覆盖在 A 上,则 A 的子元素设置的再大,也不可能覆盖过 B 的子元素。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载于(http://www.cnblogs.com/ForEvErNoME/p/3373641.html)CSS...
    陌客百里阅读 1,629评论 1 0
  • 概念 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系...
    DecadeHeart阅读 958评论 0 0
  • 概念z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系的...
    王钰峰阅读 860评论 0 0
  • title: z-indexdate: 2017-05-16 z-index z-index z-index 概念...
    SanY_cjp阅读 346评论 0 0
  • 1.浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素 浮动元素是设置float...
    Volcaner阅读 364评论 0 0