CSS中元素的层叠顺序

层叠顺序,英文称作 stacking order,表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则: 

 对于上图,由上到下分别是:

(1)背景和边框:建立当前层叠上下文元素的背景和边框。

(2)负的z-index:当前层叠上下文中,z-index属性值为负的元素。

(3)块级盒:文档流内非行内级非定位后代元素。

(4)浮动盒:非定位浮动元素。

(5)行内盒:文档流内行内级非定位后代元素。

(6)z-index:0:层叠级数为0的定位元素。

(7)正z-index:z-index属性值为正的定位元素。

注意: 当定位元素z-index:auto,生成盒在当前层叠上下文中的层级为 0,不会建立新的层叠上下文,除非是根元素。

相关推荐

  1. CSS水平垂直居中元素多种方式

    2024-03-15 23:58:03       67 阅读
  2. 工作心得——css元素方法

    2024-03-15 23:58:03       54 阅读
  3. 深入解析CSS块级元素

    2024-03-15 23:58:03       25 阅读
  4. css元素 :: before用法

    2024-03-15 23:58:03       28 阅读
  5. css3 伪类和伪元素

    2024-03-15 23:58:03       23 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-15 23:58:03       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-15 23:58:03       106 阅读
  3. 在Django里面运行非项目文件

    2024-03-15 23:58:03       87 阅读
  4. Python语言-面向对象

    2024-03-15 23:58:03       96 阅读

热门阅读

  1. Flink读取iceberg表

    2024-03-15 23:58:03       41 阅读
  2. 软件工程师,是时候了解下Rust编程语言了

    2024-03-15 23:58:03       45 阅读
  3. jsp中el表达式带有英文单双引号

    2024-03-15 23:58:03       43 阅读
  4. <个人笔记>数论

    2024-03-15 23:58:03       46 阅读
  5. C语言练习作业5

    2024-03-15 23:58:03       41 阅读
  6. LeetCode 热题 HOT 100(P11~P20)

    2024-03-15 23:58:03       36 阅读
  7. Oracle数据库连接方式

    2024-03-15 23:58:03       41 阅读
  8. 如何区分 数据库系统 和 数据库管理系统 ?

    2024-03-15 23:58:03       41 阅读
  9. oppo前端开发一面

    2024-03-15 23:58:03       36 阅读