美文网首页
渲染层、堆叠次序与z-index

渲染层、堆叠次序与z-index

作者: Ager张卫刚 | 来源:发表于2017-07-28 15:28 被阅读18次

渲染层

渲染层创建条件

  • 页面的根元素<html>创建了默认的堆叠上下文
  • 成为定位元素且具有非autoz-index属性值
  • 元素具有小于 1 的 opacity 属性
  • 在 Webkit 和 Chrome 22+ 中,固定定位的元素,即使 z-index 为 auto,也会创建
  • transform 属性不为 none

堆叠次序

默认堆叠次序

没有z-index属性的元素,按照一下顺序从底到顶依次排列

  1. 根节点的背景和边框
  2. 文档流中的后代元素,按照在HTML中出现的顺序
  3. 浮动元素
  4. 脱离文档流的定位后代元素,按照在HTML中出现的顺序

相关文章

  • 渲染层、堆叠次序与z-index

    渲染层 渲染层创建条件 页面的根元素 创建了默认的堆叠上下文 成为定位元素且具有非auto的z-index属性值 ...

  • z-index属性的理解

    简单介绍z-index 什么是z-index? z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是...

  • css—堆叠上下文

    一、堆叠顺序 如图可分为八层:负z-index --- background --- border --- blo...

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

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

  • z-index问题

    所有主流浏览器都支持 z-index 属性。 定义和用法 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序...

  • CCS深入2堆叠上下文

    堆叠顺序 堆叠上下文 堆叠上下文对z-index得影响 参考1 参考2

  • 堆叠顺序

    元素堆叠顺序简图 background border 块级 浮动 内联 z-index: 0 z-index: +...

  • 堆叠上下文

    堆叠上下文可以理解为堆叠作用域,较为抽象 以下条件满足堆叠上下文 根元素 (HTML), z-index 值不为 ...

  • z-index

    定义 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 *注释 ...

  • Z-index详解

    概念 z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 层级关系...

网友评论

      本文标题:渲染层、堆叠次序与z-index

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