CSS层叠顺序

介绍

在 CSS 中,元素的层叠顺序决定了当多个元素重叠时(跟布局没有完全的关系,也就是说层叠顺序只会在几个叠放元素上进行比较,而不会改变布局),哪个元素显示在最上面,哪个元素显示在最下面。

默认情况下,元素的层叠顺序是由它们在 HTML 中出现的顺序决定的------后出现的元素会覆盖前面元素的显示区域。但 CSS 提供了多个方式来调整这个顺序,确保元素按照特定的需求进行堆叠。

  1. 视觉层叠

在浏览器渲染页面时,如果多个元素的位置发生重叠,浏览器会根据它们的"层叠顺序"来决定哪个元素显示在上面。一般来说,后面的元素会覆盖前面的元素,但我们可以通过调整 z-index、position 等属性来改变这种默认行为。

  1. 默认层叠顺序

默认情况下,元素的层叠顺序是根据它们在 DOM 中的位置确定的。一个元素的层叠顺序比它前面的元素要大。如果没有特殊设置,后出现的元素会覆盖先出现的元素。

层叠顺序控制

1. z-index

z-index 控制的是元素的层叠顺序,数值大的元素会显示在数值小的元素上面。z-index 只对定位元素(position:relative | absolute | fixed | sticky)生效。默认情况下 z-index 为 auto , auto 时他们的堆叠顺序是由文档顺序决定。 auto 属性就是计算属性的最终值。设置为 auto 属性的元素在层叠顺序上会相对较弱,会按照文档流层叠。

2. position

position 属性是影响层叠顺序的一个关键因素。只有在元素的 position 属性设置为 relative、absolute、fixed 或 sticky 时,z-index 才会生效。如果一个元素没有设置 position(即默认为 static),那么它的 z-index 就不会生效,元素会根据文档顺序进行显示。

它的层叠只会因为 z-index 而有差别,不会因为是否脱离文档流而提升层叠性。(只有 z-index 相同时才由文档流决定)

3. z-index和堆叠上下文

当一个元素的 position 被设置为 relative 、 absolute、 fixed 或 sticky,并且该元素有一个非 auto 的 z-index 值时,浏览器会创建一个新的堆叠上下文 (stacking context) 。堆叠上下文中的元素的 z-index 值仅在其所在的上下文内有效,而与外部的元素无关。

基本层叠顺序

从下到上依次为:

  1. 背景和边框:元素的背景和边框处于最底层。
  2. 负 z-index 值元素z-index 设为负数的定位元素(如 position: relativeposition: absoluteposition: fixedposition: sticky)会位于普通元素之下。
  3. 块级元素:普通的块级元素按文档流顺序依次堆叠。
  4. 浮动元素:浮动元素会覆盖普通块级元素。
  5. 行内元素:行内元素会覆盖浮动元素和块级元素。
  6. z-index 为 0 或 auto 的定位元素 :定位元素但 z-index0 或者 auto 时,按文档流顺序堆叠在其他元素之上。
  7. 正 z-index 值元素z-index 设为正数的定位元素会位于其他元素之上,z-index 值越大,越处于上层。
相关推荐
草莓熊Lotso36 分钟前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
Olrookie1 小时前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
533_1 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
故事与他6452 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
莫的感情2 小时前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥3 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python3 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_3 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js
Github项目推荐3 小时前
你的错误处理一团糟-是时候修复它了-🛠️
前端·后端
Code小翊3 小时前
C语言bsearch的使用
java·c语言·前端