美文网首页前端开发笔记
CSS属性 z-index 堆叠顺序

CSS属性 z-index 堆叠顺序

作者: Charlin丶 | 来源:发表于2023-02-08 16:20 被阅读0次

当一个元素(标签)设置了z-index数值(非auto)且是定位元素时,该元素就会产生一块区域叫Stack Context,它规定了该区域中的内容在Z轴上的排列先后顺序。

html元素(根元素)默认存在一个Stack Context

同一个Stack Context中元素在Z轴上从后到前的排列顺序为:

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

相关文章

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

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

  • z-index属性的理解

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

  • z-index问题

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

  • CSS属性 z-index 堆叠顺序

    当一个元素(标签)设置了z-index数值(非auto)且是定位元素时,该元素就会产生一块区域叫Stack Con...

  • z-index

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

  • Z-index详解

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

  • CSS基础:z-index详解

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

  • 什么是堆叠上下文?

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

  • HTML4.01+CSS2.0教程(五)

    2/26/2017 8:47:21 AM 设置元素堆叠顺序属性Z-index z-index只能在定位元素上奏效(...

  • z-index 的作用

    作用 z-index属性表示一个元素在叠加顺序上的上下立体关系,拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素...

网友评论

    本文标题:CSS属性 z-index 堆叠顺序

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