当前位置: 首页 > news >正文

css_z-index属性

z-index 工作原理及层叠上下文(Stacking Context)

在 CSS 中,z-index 主要用于控制元素的堆叠顺序,决定哪些元素显示在上层,哪些元素在下层。它的工作原理涉及 层叠上下文(Stacking Context),理解这一概念对正确使用 z-index 至关重要。


  1. z-index 的基本规则

z-index 只能作用于 position 为 relative、absolute、fixed 或 sticky 的元素,static(默认值)无效。

z-index 数值越大,元素越靠上。

默认情况下,HTML 元素按照 DOM 顺序 依次渲染,后出现的元素会覆盖前面的元素。


  1. 层叠上下文(Stacking Context)

层叠上下文 是 CSS 视觉渲染中的一个独立层级概念,类似一个 “小世界”,里面的子元素只在该上下文内进行层叠,而不会影响外部的层级关系。

层叠上下文的创建方式:

一个元素会在以下情况下 自动创建 层叠上下文:

  1. 根元素():它是默认的最顶层层叠上下文。

  2. z-index 不是 auto 且 position 值为 relative、absolute、fixed。

  3. opacity < 1(即 opacity: 0.99 也会触发)。

  4. transform(如 transform: scale(1))。

  5. filter(如 filter: blur(5px))。

  6. perspective(如 perspective: 500px)。

  7. clip-path、mask、contain(layout 或 paint)。

  8. will-change: transform(触发 GPU 加速)。

注意:层叠上下文内的元素只能相互比较 z-index,不会受外部 z-index 影响。


  1. 层叠顺序(Stacking Order)

当多个元素处于同一层叠上下文时,它们的默认层叠顺序如下(从低到高):

  1. 根元素 (最低层)

  2. 正常流的块级元素(static 或 relative 且 z-index: auto)

  3. 负 z-index 的 position: absolute/fixed 元素

  4. 普通的 inline 或 inline-block 元素

  5. z-index: auto 的 position: relative/absolute/fixed 元素

  6. z-index >= 0 的 position: relative/absolute/fixed 元素

  7. 拥有 opacity < 1 的元素

  8. 拥有 z-index 的层叠上下文


  1. z-index 的常见问题

(1) z-index 失效?

原因:

没有 position:如果 position 为 static,z-index 不生效。

层叠上下文问题:子元素的 z-index 不能超越父级的层叠上下文。

被 opacity: <1 创建的新层叠上下文困住。

示例

.parent {
position: relative;
z-index: 10;
opacity: 0.9; /* 创建了新的层叠上下文 */
}

.child {
position: absolute;
z-index: 999; /* 仍然受 parent 约束,不会超出 */
}

(2) z-index 负值是否可用?

负 z-index 可以让元素 低于 常规文档流的内容,但不会低于 background(背景)。


  1. 例子

(1) 层叠上下文影响 z-index

.parent {
position: relative;
z-index: 2;
background: red;
width: 200px;
height: 200px;
}

.child {
position: absolute;
z-index: 999;
background: blue;
width: 100px;
height: 100px;
}

.sibling {
position: relative;
z-index: 1;
background: green;
width: 200px;
height: 200px;
margin-top: -100px;
}

结果

.child 的 z-index: 999 只影响 .parent 内部,不影响 .sibling。

.parent 的 z-index: 2 高于 .sibling 的 z-index: 1,所以 .parent 覆盖 .sibling。


  1. 总结

  2. z-index 只有在 position 为 relative/absolute/fixed/sticky 时生效。

  3. 层叠上下文会隔离 z-index,内部的 z-index 无法超出父级的层叠上下文。

  4. 某些 CSS 属性(opacity<1、transform、filter 等)会创建新的层叠上下文。

  5. 负 z-index 可能会让元素低于普通内容,但不会低于背景。

如果遇到 z-index 失效,首先检查是否 被层叠上下文限制 了!

相关文章:

css_z-index属性

z-index 工作原理及层叠上下文&#xff08;Stacking Context&#xff09; 在 CSS 中&#xff0c;z-index 主要用于控制元素的堆叠顺序&#xff0c;决定哪些元素显示在上层&#xff0c;哪些元素在下层。它的工作原理涉及 层叠上下文&#xff08;Stacking Context&#xff09;&a…...

ros2--xacro

什么是xacro 在ROS 2中&#xff0c;Xacro&#xff08;XML Macros&#xff09;是一种基于XML的宏语言&#xff0c;专门用于简化URDF&#xff08;Unified Robot Description Format&#xff09;文件的编写。它通过宏定义、变量替换和代码复用等功能&#xff0c;让机器人模型的描…...

Nordic 新一代无线 SoC nRF54L系列介绍

目录 概述 1 nRF54L系列特点 1.1 内存 1.2 芯片封装 2 增强的多协议支持 3 其他特性 4 nRF54L系列MCU特性 4.1 多协议无线电 4.2 安全性 4.3 存储空间 4.4 工作参数 4.5 调试接口 4.6 外设 概述 全新 nRF54L 系列的所有三款器件均将 2.4 GHz 无线电和 MCU 功能 (包括…...

力扣HOT100之矩阵:240. 搜索二维矩阵 II

这道题直接暴力AC的&#xff0c;虽然也能过&#xff0c;但是耗时太长了。 class Solution { public:bool searchMatrix(vector<vector<int>>& matrix, int target) {int edge min(matrix.size(), matrix[0].size()) - 1; //先在edge * edge的矩阵中搜索for…...

一个判断A股交易状态的python脚本

最近在做股票数据相关的项目&#xff0c;需要用到判断某一天某个时刻A股的状态&#xff0c;比如休市&#xff0c;收盘&#xff0c;交易中等&#xff0c;发动脑筋想了一下&#xff0c;这个其实还是比较简单的&#xff0c;这里我把实现方法分享给大家。 思路 当天是否休市 对于某…...

为什么package.json里的npm和npm -v版本不一致?

这个情况出现是因为package.json里的 npm 版本和系统实际使用的 npm 版本是两个不同的概念。让我来解释一下&#xff1a; 原因解释 全局 npm vs 项目依赖&#xff1a; npm -v显示的是系统全局安装的 npm 版本&#xff08;位于/usr/bin/npm或类似路径&#xff09;package.jso…...

Rust 有问有答之 use 关键字

use 是什么# use 是 Rust 编程语言的关键字。using 是 编程语言 C# 的关键字。 关键字是预定义的保留标识符&#xff0c;对编译器有特殊意义。 using 关键字有三个主要用途&#xff1a; using 语句定义一个范围&#xff0c;在此范围的末尾将释放对象。 using 指令为命名空间创…...

[skip]CBAM

论文题目:CBAM: Convolutional Block Attention Module 中文题目:CBAM: 注意力卷积模块 0摘要 我们提出了卷积块注意力模块(CBAM),一个简单而有效的前馈卷积神经网络注意力模块。给定一个中间特征图,我们的模块沿着两个独立的维度(通道和空间)顺序推断注意力图,然后…...

突破反爬困境:SDK开发,浏览器模块(七)

声明 本文所讨论的内容及技术均纯属学术交流与技术研究目的&#xff0c;旨在探讨和总结互联网数据流动、前后端技术架构及安全防御中的技术演进。文中提及的各类技术手段和策略均仅供技术人员在合法与合规的前提下进行研究、学习与防御测试之用。 作者不支持亦不鼓励任何未经授…...

在MFC中使用Qt(四):使用属性表(Property Sheet)实现自动化Qt编译流程

前言 首先回顾下前面文章介绍的&#xff1a; 在MFC中使用Qt&#xff08;一&#xff09;&#xff1a;玩腻了MFC&#xff0c;试试在MFC中使用Qt&#xff01;&#xff08;手动配置编译Qt&#xff09; 在MFC中使用Qt&#xff08;二&#xff09;&#xff1a;实现Qt文件的自动编译流…...

相机镜头景深

文章目录 定义影响因素实际应用特殊情况 参考&#xff1a;B站优致谱视觉 定义 景深是指在摄影机镜头或其他成像器前沿着能够取得清晰图像的成像器轴线所测定的物体距离范围。简单来说&#xff0c;就是在一张照片中&#xff0c;从前景到背景&#xff0c;能够保持清晰锐利的区域…...

HTML实现图片上添加水印的工具

HTML实现图片上添加水印的工具 本文介绍两种实现方式&#xff1a;图片上添加文字水印和图片上添加图片水印。部分源码参照自网络。 一、图片上添加文字水印 先看效果图&#xff1a; 源码如下&#xff1a; <!DOCTYPE html> <html lang"zh"> <head&…...

mysql JSON_ARRAYAGG联合JSON_OBJECT使用

父表数据&#xff08;表名&#xff1a;class&#xff09; idname1一年级2二年级3三年级 子表数据&#xff08;表名&#xff1a;students&#xff09; idnameclassId11张三112李四113小明3 sql查询&#xff08;推荐使用方法一&#xff09; 方法一 (使用IFNull判断子表数据是否…...

VMware虚拟机 ubuntu22.04无法与共享粘贴板和拖拽文件的解决方案

VMware虚拟机 ubuntu22.04无法与共享粘贴板和拖拉文件的解决方案 卸载VMware tools安装open-vm-tools还无法拖拽文件 卸载VMware tools 确保卸载完vmware-tools # 进入vmware-tools安装目录/bin sudo vmware-uninstall-tools.pl sudo rm -rf /usr/lib/vmware-tools sudo apt-…...

C++STL---<functional>

C标准库中的 <functional> 库是一个强大的工具集&#xff0c;它提供了用于处理函数对象、函数绑定、函数包装等功能的设施&#xff0c;极大地增强了代码的灵活性和可复用性。 1. 函数对象&#xff08;Functors&#xff09; 函数对象&#xff0c;也被称作仿函数&#xf…...

【Android】BluetoothSocket.connect () 的实现与协议栈交互源码解析

本文以 Android 蓝牙框架中的BluetoothSocket.connect()方法为切入点,深入剖析 Android 设备与远程蓝牙设备建立连接的全流程。从 Java 层的 API 调用出发,逐步追踪至 JNI 层的接口转发,最终进入 Buedroid 协议栈(RFCOMM/L2CAP 层),揭示蓝牙连接的核心机制。重点解析了权…...

算法导论(动态规划)——简单多状态

算法思路&#xff08;17.16&#xff09; 状态表示&#xff1a; 在处理线性动态规划问题时&#xff0c;我们可以通过“经验 题目要求”来定义状态表示。通常有两种选择&#xff1a; 以某个位置为结尾的情况&#xff1b;以某个位置为起点的情况。 本题中&#xff0c;我们选择更常…...

主成分分析(PCA)学习介绍及其高阶应用,金融风险分析

前言 主成分分析&#xff08;Principal Component Analysis, PCA&#xff09;是统计学中一种重要的降维技术。它通过寻找数据中各特征之间的线性关系&#xff0c;来降低数据的维度&#xff0c;同时保留数据中的主要信息。PCA在机器学习、信号处理、图像处理等领域广泛应用&…...

利用 SSRF 和 Redis 未授权访问进行内网渗透

目录 环境搭建 ​编辑 发现内网存活主机 ​编辑 扫描内网端口 ​编辑 利用 Redis 未授权访问进行 Webshell 写入 步骤1&#xff1a;生成 payload 方式1&#xff1a;使用python生成 payload 方式二&#xff1a;使用 Gopher 工具 步骤 2&#xff1a;写入 Webshell&#xf…...

计算机网络和因特网

目录 1、什么是Internet&#xff1f; 1.1定义 1.2具体构成描述 2、什么是协议&#xff1f; 2.1 服务描述 2.2 网络协议 3、网络边缘 3.1 定义与组成 3.2 模式 3.3服务 4、接入网、物理媒介 4.1、宽带有线接入网技术 4.2、宽带无线接入网技术 5、网络核心&#xf…...

1.oracle修改配置文件

1.找到oracle的安装路径 D:\app\baozi\product\11.2.0\dbhome_1\NETWORK\ADMIN &#xff0c;修改下面的两个文件。如果提示没有权限&#xff0c;可以先把这两个文件复制到桌面&#xff0c;修改完后&#xff0c;在复制回来。 2.查看自己电脑的主机名&#xff0c; 右击 - 此电脑 …...

算法篇-------------双指针法

温馨提示&#xff1a;由于c语言在编程上更有优势&#xff0c;更加简洁&#xff0c;本文代码均为c代码&#xff0c;其他语言也可以 做&#xff0c;思想是不变的&#xff01; 1.应用场景 涉及到对数组的操作的题目&#xff0c;可以考虑双指针方法解决 2.基…...

Java关于包和final

什么是包&#xff1f; 包就是文件夹。用来管理等各种不同功能的java类&#xff0c;方便后期代码维护 包名的规则&#xff1a;公司域名反写包的作用&#xff0c;需要全部英文小写&#xff0c;见名知意。例如&#xff1a;com.pdsu.domain package com.pdsu.demain;public class…...

2025年华为HCIP题库分享

1101、 【拖拽题】OPSF邻接关系建立的过程中需要使用不同的报文&#xff0c;那么请分别将以下各个状态和该状态使用的报文联系起来。 答题格式为&#xff1a;11 22 33 43 正确答案&#xff1a;【12】【21】【24】【33】 解析&#xff1a; 建立邻居关系 RouterA的一个连接到广…...

49. 字母异位词分组

leetcode Hot 100系列 文章目录 一、核心操作二、外层配合操作三、核心模式代码总结 一、核心操作 先把每一个词都排序&#xff0c;拍完之后相同的就是字母异位词使用map&#xff0c;排序完的作为key&#xff0c;一个string数组作为value对于每一个词&#xff0c;排完序之后将…...

python 语法篇(一)

目录 1 正则匹配注意点11.1 正则匹配字符串写法1.2 创建re函数&#xff08;1&#xff09;re.search()--搜索第一个匹配项&#xff08;2&#xff09;re.match() - 从字符串开头匹配&#xff08;3&#xff09;re.findall() - 返回所有匹配项的列表&#xff08;4&#xff09;re.fi…...

机器学习ML极简指南

机器学习是现代AI的核心&#xff0c;从推荐系统到自动驾驶&#xff0c;无处不在。但每个智能应用背后&#xff0c;都离不开那些奠基性的模型。本文用最简练的方式拆解核心机器学习模型&#xff0c;助你面试时对答如流&#xff0c;稳如老G。 线性回归 线性回归试图通过"最…...

爬虫:网络请求(通信)步骤,http和https协议

电脑(浏览器)&#xff1a;www.baidu.com——url DNS服务器&#xff1a;IP地址标注服务器——1.1.38 DNS服务器返回IP地址给浏览器 浏览器拿到IP地址去访问服务器&#xff0c;返回响应 服务器返回给响应数据&#xff1a;html/css/js/jpg... html&#xff1a;文本 cs…...

【杂谈】-大型语言模型对具身人工智能发展的推动与挑战

大型语言模型对具身人工智能发展的推动与挑战 文章目录 大型语言模型对具身人工智能发展的推动与挑战1. 具身人工智能&#xff08;Embodied AI&#xff09;的内涵解析2. 大型语言模型的功能与作用3. 最新发展趋势4. 面临的挑战与考量因素5. 总结与展望 多年来&#xff0c;研发能…...

解决Beats Solo Buds 无法自动切换音频到耳机的问题

一、核心问题定位 现象矛盾点&#xff1a; Beats 耳机能连接但需手动切换音频 AirPods 可自动切换 → 排除 iOS 系统级故障 问题可能源于 Beats 固件兼容性 或 音频路由逻辑冲突 关键差异&#xff1a; 设备 芯片类型 自动切换协议支持 固件更新方式 AirPods 二代 H1芯片 原…...

MySQL基本查询

一.create 1.1 单行数据 全列插入 1.2 多行数据 指定列插入 1.3插入否则更新 1.4替换 二.Retrieve 2.1.SELECT列 2.1.1全列查询 2.1.2指定列查询 2.1.3查询字段为表达式 2.1.4 为查询结果指定别名 2.1.5结果去重 2.2WHERE 条件 2.2.1比较运算符 2.2.3逻辑运算符…...

面基:为什么不推荐用UUID作为主键

推荐回答结构&#xff1a; 技术理论层面分析 实际项目中的教训 优化改进过程 总结提炼认知 阐述回答 在阐述回答时&#xff0c;你可以从 UUID 本身特性带来的问题&#xff0c;以及在实际工作中遇到的具体场景和优化过程等方面展开&#xff0c;下面从这一思路&#xff0c;给…...

oracle 常用函数的应用

在使用开发中会经常遇到数据类型转换、显示系统时间等情况&#xff0c;需要使用函数来实现。通过函数来实现业务需求会非常的省事便捷&#xff0c;函数可以用在适当的dml语句和查询语句中。 Oracle 数据库中主要使用两种类型的函数&#xff1a; (1)单行函数&#xff1a;对每一个…...

ubuntu的ubuntu--vg-ubuntu--lv磁盘扩容

在我们安装ubuntu时&#xff0c;如果选择的是自动分区&#xff0c;就会按照逻辑卷的形式来分区&#xff0c;并且只分配100G其余的并不会被分配&#xff0c;这对我们大多数情况来说都是不合理的&#xff0c;所以&#xff0c;如何扩充呢 下面以一个小的案例来说明如何扩充 问题…...

鬼泣:升龙系统

文章目录 0.升龙系统&#xff1a;升龙斩使敌人浮空升龙斩使敌人浮空&#xff1a;设置flying状态&#xff0c;不会落下 1.升龙斩&#xff1a;S 攻击S按下calculate directionin range warp&#xff1a;前提是根运动打开蒙太奇拔刀收刀canCombo&#xff1a;接轻攻击连击 2. A.向…...

UI产品经理基础(四):用价值链视角来分析项目需求

用价值链视角来分析项目需求 作为产品经理&#xff0c;从价值链视角分析项目需求&#xff0c;能够更精准地定位价值创造的关键环节&#xff0c;确保资源投入与用户需求、商业目标深度匹配。以下是系统化的方法论与落地步骤&#xff0c;结合案例说明如何实现需求分析与用户认可…...

ThinkPHP的“get\post\put\delete“请求

首先了解一下这四个请求的区别 1.GET 请求 用途&#xff1a;获取资源&#xff08;只读操作&#xff0c;不修改服务器数据&#xff09;。 特点&#xff1a; 参数通过 URL 的 查询字符串&#xff08;Query String&#xff09; 传递&#xff08;例如 /book?id1&#xff09;。 数…...

目标检测的训练策略

在目标检测竞赛中&#xff0c;训练策略的优化是提高模型性能的关键。常用的训练策略包括数据预处理、数据增强、超参数调节、损失函数设计、正负样本采样、模型初始化和训练技巧等。以下是一些常见的训练策略&#xff1a; 1. 数据预处理与数据增强 数据归一化&#xff1a;对输…...

【JavaSE】小练习 —— 图书管理系统

【JavaSE】JavaSE小练习 —— 图书管理系统 一、系统功能二、涉及的知识点三、业务逻辑四、代码实现4.1 book 包4.2 user 包4.3 Main 类4.4 完善管理员菜单和普通用户菜单4.5 接着4.4的管理员菜单和普通用户菜单&#xff0c;进行操作选择&#xff08;1查找图书、2借阅图书.....…...

代码随想录Day29

Day29 动态规划part02 LeetCode 62.不同路径 题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &…...

Python入门(3):语句

目录 1 基本语句 1.1 表达式语句 1.2 赋值语句 2 控制流语句 2.1 条件语句 2.2 循环语句 while循环&#xff1a; for循环&#xff1a; 2.3 流程控制语句 1. break语句&#xff1a;退出整个循环体 2. continue语句&#xff1a;只跳过本次循环&#xff0c;还会进…...

04_SQL概述及DDL

文章目录 一、关于SQL1.1、SQL概述1.2、SQL分类 二、数据库操作2.1、查看数据库2.2、切换数据库2.3、查询当前使用的数据库2.4、创建数据库2.5、查看数据库创建信息2.6、修改数据库2.7、删除数据库 三、表的操作3.1、数据类型3.1.1、数值类型3.1.2、字符串类型3.1.3、日期时间类…...

如何调整yarn.nodemanager.vmem-pmem-ratio参数?

调整 yarn.nodemanager.vmem - pmem - ratio 参数&#xff0c;可参考以下步骤&#xff1a; 打开YARN配置文件 找到 yarn - site.xml 文件&#xff0c;该文件通常位于Hadoop配置目录中&#xff0c;例如 /etc/hadoop/conf 或 /opt/module/hadoop - 3.1.3/etc/hadoop 。 找到并修改…...

【质量管理】质量的系统是预防,那以预防为主的质量管理系统包括什么?

“质量的系统是预防”这是克劳士比零缺陷管理四项基本原则的第二项基本原则。什么样的系统才是一个以预防为主的质量管理系统呢&#xff1f; 一个以预防为主的质量系统&#xff0c;必须包括三大方面&#xff1a;质量检验系统、质量保证系统、质量管理系统。 举个例子&#xff1…...

JavaScript 事件流与事件委托

目录 一、事件流、事件捕获与事件冒泡 1. 事件流&#xff08;Event Flow&#xff09; 2. 事件捕获&#xff08;Event Capturing&#xff09; 3. 事件冒泡&#xff08;Event Bubbling&#xff09; 4. 阻止事件冒泡 5. 事件解绑 6. 实际应用场景 二、事件委托 1. 什么是…...

RAG 优化 Embedding 模型或调整检索策略

在 RAG(Retrieval-Augmented Generation)系统中,优化 Embedding 模型和调整检索策略是提升检索质量的核心手段。以下是系统化的优化方法和实践指南: 一、优化 Embedding 模型 Embedding 模型的质量直接决定检索的召回率(Recall)和准确率(Precision)。优化方向包括: …...

Sentinel[超详细讲解]-3

主要讲解&#x1f680; - 基于QPS/并发数的流量控制 1、流控规则 流量控制&#xff08;Flow Control&#xff09;用于限制某个资源的访问频率&#xff0c;防止系统被瞬时的流量高峰冲垮。流量控制规则可以针对不同的资源进行配置&#xff0c;例如接口、方法、类等。 流量规则的…...

vue3使用i18n$t()无法获取数组和对象

今天在使用i18n进行国际化时&#xff0c;定义了数组和对象节点&#xff0c;但是用$t()无法获取&#xff0c;只能返回字符串值&#xff0c;查询相关材料&#xff0c;解决方案如下&#xff1a; 使用新的api替换即可&#xff0c;$t > $tm 参考文章(深表谢意)&#xff1a;vue -…...

机器学习的一百个概念(5)数据增强

前言 本文隶属于专栏《机器学习的一百个概念》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见[《机器学习的一百个概念》 ima 知识库 知识库广场搜索&…...

(Kotlin)Android 高效底部导航方案:基于预定义 Menu 和 ViewPager2 的 Fragment 动态绑定实现

支持预定义 Menu 并绑定 Fragment&#xff0c;同时保留动态添加 Tab 的能力 BottomTabHelper.kt package smartconnection.com.smartconnect.home.utilimport android.content.Context import android.util.SparseArray import androidx.annotation.IdRes import androidx.fra…...