美文网首页
css属性之z-index详解

css属性之z-index详解

作者: 伊各的诗与代码 | 来源:发表于2016-11-11 11:01 被阅读0次

先来解析几个概念,基本上了解概念之后就已经能够掌握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为正

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

相关文章

  • css属性之z-index详解

    先来解析几个概念,基本上了解概念之后就已经能够掌握z-index属性了。 所有的引用均来自css2.1规范 根元素...

  • CSS深入理解之z-index 笔记

    z-index 与 css 定位属性 z-index 只对定位元素有作用。 如果定位元素z-index没有发生嵌套...

  • 2018-09-19 css核心属性

    DAY4:CSS核心属性 学习目标 1、css浮动属性详解 2、css文本属性 3、css列表属性 4、css背景...

  • 03-CSS核心属性

    学习目标 1、css浮动属性详解2、css文本属性3、css列表属性4、css背景属性5、css边框属性 一、cs...

  • css之z-index属性

    ** z-index只对定位元素有用(relative/absolute/fixed/sticky)** 如果定位...

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • 2019-06-26

    CSS3 网上推荐的CSS书写规范 1.位置属性 (position, top, right, z-index, ...

  • 层叠上下文与层叠顺序-Z-index

    CSS中Z-index属性 z-index属性的定义是设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序...

  • css3-transform

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translat...

  • CSS3属性transform详解

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translat...

网友评论

      本文标题:css属性之z-index详解

      本文链接:https://www.haomeiwen.com/subject/yikwuttx.html