css属性之z-index详解

先来解析几个概念,基本上了解概念之后就已经能够掌握z-index属性了。

所有的引用均来自css2.1规范

根元素形成根堆叠上下文。
其它堆叠上下文由任意'z-index'的计算值不为'auto'的定位的(positioned)元素(包括相对定位元素)生成,堆叠上下文不一定与包含块有关。
一些css3属性会生成堆叠上下文,比如opacity、transform等。

如果一个元素的position属性有一个除static外的值,就说它是定位的(positioned)。

堆叠层级,也就是z-index了。堆叠层级决定了该盒子在自己属于的那一个堆叠上下文中的位置。

在每个堆叠上下文中,下列层按从后向前的顺序绘制:(也可以参考下边的图)

  1. background,border
  2. z-index为负
  3. block
  4. float
  5. inline inline-block inline-table
  6. z-index为0、auto
  7. z-index为正

所有的元素都会被计算自身的层叠情况,这个层叠情况依据层叠规则来决定,而元素与哪些其他的元素产生层叠取决于他自身的层叠上下文

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • 1.z-index基础 z-index属性指定了元素及其子元素的[z顺序],而[z顺序]可以决定当元素发生覆盖的时...
    徐国军_plus阅读 6,437评论 1 6
  • CSS 定位 CSS有三种基本的定位机制:普通流,浮动,绝对定位(absolute, fixed):普通流是默认定...
    _空空阅读 5,837评论 0 15
  • z-index 与 css 定位属性 z-index 只对定位元素有作用。 如果定位元素z-index没有发生嵌套...
    soojade阅读 930评论 0 2
  • 1.z-index简介 (1) 概念 z-index属性指定了元素与元素之间的z轴上的顺序,而z轴决定元素之间发生...
    Bennt阅读 24,062评论 2 10