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 值越大,越处于上层。
相关推荐
paopaokaka_luck14 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路3 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任4 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴4 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔4 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js