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 值越大,越处于上层。
相关推荐
LFly_ice5 分钟前
学习React-18-useCallBack
前端·学习·react.js
How_doyou_do1 小时前
样式冲突修复组件
前端·javascript·html
IT_陈寒1 小时前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端
isixe1 小时前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
蓝莓味的口香糖1 小时前
【npm】npm命令大全
前端·npm·node.js
我是天龙_绍1 小时前
uniapp一个关于自定义导航栏高度计算的问题
前端
彭一1 小时前
uniapp评论弹窗
前端
**之火1 小时前
中止 Web 请求新方式 - AbortController API
开发语言·前端·javascript
我有一棵树2 小时前
如何优雅的布局,height: 100% 的使用和 flex-grow: 1 的 min-height 陷阱
前端·css·html
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序页面交互 —— 知识点详解与案例实现(3)
前端·javascript·学习·react.js·微信小程序·小程序·交互