美文网首页
关于堆叠上下文, 有哪些了解?

关于堆叠上下文, 有哪些了解?

作者: 风雅欢乐 | 来源:发表于2020-05-13 20:38 被阅读0次

堆叠上下文(stack context), 它是一块区域, 这块区域由某个元素创建, 它规定了该区域中的内容在Z轴上排列的先后顺序.

会创建堆叠上下文的元素

  • 根元素
  • 设置了z-index(即非auto)数值的定位元素

同一个堆叠上下文中, 元素在Z轴上的排列顺序

从后往前依次是:

  1. 创建该堆叠上下文的元素的背景和边框
  2. 堆叠级别(z-index)为负值的堆叠上下文
  3. 常规流非定位的块盒
  4. 非定位的浮动盒子
  5. 常规流非定位行盒
  6. 任何z-index是auto的定位子元素, 以及z-index是0的堆叠上下文
  7. 堆叠级别为正值的堆叠上下文

相关文章

  • 关于堆叠上下文, 有哪些了解?

    堆叠上下文(stack context), 它是一块区域, 这块区域由某个元素创建, 它规定了该区域中的内容在Z轴...

  • stack content 堆叠上下文(CSS查漏补缺)

    文: jack同学 堆叠上下文:是一个区域,这个 哪些元素创建了堆叠上下文?html元素设置了z-index为非a...

  • 堆叠上下文

    堆叠顺序堆叠顺序 堆叠上下文 堆叠上下文 https://developer.mozilla.org/zh-CN/...

  • CSS深入浅出-堆叠上下文

    本博客主要讲CSS的堆叠顺序以及什么是堆叠上下文和堆叠上下文的作用。 堆叠上下文 导读 1.什么是堆叠顺序2.什么...

  • CCS深入2堆叠上下文

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

  • 什么是堆叠上下文?

    首先我们需要了解css中堆叠顺序的概念在没有触发堆叠上下文时,正常的堆叠顺序应该为:负z-index

  • 堆叠上下文

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

  • css深入浅出:03_堆叠上下文

    1 . 什么是堆叠顺序? 2 . 什么是堆叠上下文? 堆叠顺序: background border 块级 浮...

  • CSS 堆叠上下文

    一、什么是堆叠上下文 堆叠上下文(stacking context)是 HTML 中的一个三维的概念。这些 HTM...

  • 堆叠上下文

    1、堆(层)叠上下文是什么? 官方解释:层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向...

网友评论

      本文标题:关于堆叠上下文, 有哪些了解?

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