【CSS】opacity 影响 z-index 不生效

准备知识

一般来说,z-index 不生效的原因有:

  1. 父元素的 position 属性:
    z-index 只对 position 属性为 relative、absolute 或 fixed 的元素有效。

  2. 其他元素的 z-index:
    如果页面中有其他元素也设置了较高的 z-index,可能会覆盖你的 .app 元素。

  3. CSS 特性:
    z-index 的效果可能受到 CSS 特性的影响,例如 transform、opacity 等。
    确保没有其他 CSS 特性干扰 z-index 的效果。

我的项目中就是由于第三点,opacity 影响了 z-index ,导致 z-index 不生效。

在这里插入图片描述

我的某个元素同时具有 link 和 download 选择器,代码如下:

.link {display: inline-block;margin-right: 10px;color: $bgGrayColor;font-size: $fontSize12;line-height: 14px;padding: 0 14px;// 字体变暗opacity: 0.8;  // 该 属性 导致 z-index 不生效// 去掉默认样式text-decoration: none;
}.download {//局部的相对定位使用 子绝父相position: relative;.app {display: none;position: absolute;top: 25px;left: 0;padding: 8px;box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);z-index: 10000;  // 不生效.ecode {width: 140px;height: 140px;}.name {color: #000;margin-top: 2px;}}
}

解决方法

  • 将 opacity 应用到子元素:将 opacity 应用到 .app 的子元素而不是 .app 本身,这样不会影响 .app 的堆叠上下文。
  • 或者 去除 opacity

在这里插入图片描述

原因分析

  • 当一个元素的 opacity 小于 1 时,它会创建一个新的堆叠上下文(stacking context),这可能会导致 z-index 无法按预期工作。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/886604.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

11.15 ~ 18日志

1.Problem - A - Codeforces 这道题感觉网上的题解都讲得非常复杂,但是也给了我一些启发,最后a出来后发现并没有那么困难,首先这题假设我们的答案是x,那么就代表有(sum k) / x个牌堆,想要让x合法需要满足两个条件 1.(sum k) / x > maxn,因为每副牌堆不能有重复的牌,那么…

django安装与项目创建

一、安装 在终端输入 pip install django //或者()指定安装版本 pip install django2.2 二、创建项目 2.1创建项目 django-admin startproject 项目名 2.2Django 项目中的关键文件 _init_.py:将目录标识为python包setting.py:核心配置文件,定义项目…

《高压物理学报》

刊载内容主要包括: 高温高压下材料的力、热、光、电、磁等特性 高温高压下材料的微观结构和相变 高温高压物态方程 动态及静态高压加载和测试技术 高压合成新材料 高压地球和行星科学 高压下物质的动态响应 冲击和爆轰现象 高压与化学、生物等交叉科学及技…

Python学习28天

#冒泡排序,将如下列表从大到小排序 num[1,2,3,4,5] print(f"排序前:{num}")#第一次排序:将最小的排到最后一个位置: # 第1次比较 [2,1,3,4,5] # 第2次比较 [2,3,1,4,5] # 第3次比较 [2,3,4,1,5] # 第4次比较 [2,3,4,5,…

Shell脚本5 -- 脚本与用户交互read

声明: 本文的学习内容来源于B站up主“泷羽sec”视频【shell编程(4)脚本与用户交互以及if条件判断】的公开分享,所有内容仅限于网络安全技术的交流学习,不涉及任何侵犯版权或其他侵权意图。如有任何侵权问题&#xff0c…

【大语言模型】ACL2024论文-16 基于地图制图的罗马尼亚自然语言推理语料库的新型课程学习方法

【大语言模型】ACL2024论文-16 基于地图制图的罗马尼亚自然语言推理语料库的新型课程学习方法 目录 文章目录 【大语言模型】ACL2024论文-16 基于地图制图的罗马尼亚自然语言推理语料库的新型课程学习方法目录摘要:研究背景:问题与挑战:如何解…

【网络安全 | 漏洞挖掘】未授权获取AI聊天内容

未经许可,不得转载。 文章目录 两天前,我收到了一项私人项目的邀请,内容看起来像是一个聊天机器人,类似于 Gemini 或 ChatGPT。于是我开始测试该项目的一些业务逻辑漏洞和 IDOR(不当访问控制)漏洞。尽管这个产品拥有一个强大的安全团队,网站上也部署了 WAF(Web 应用防火…

7天掌握SQL - 第一天:数据库基础与SQL入门

目标 在本章节中,我们将学习数据库的基本概念和SQL语言的基础操作,为后续的深入学习打下坚实的基础。 一级目录 数据库基本概念SQL语言基础SQL操作实践推荐资源总结 1. 数据库基本概念 1.1 表(Table) 表是数据库中存储数据的…

vue实现展示并下载后端返回的图片流

// 点击下载 downLoadCode() {const image new Image();image.setAttribute("crossOrigin", "anonymous");image.onload () > {const canvas document.createElement("canvas");canvas.width image.width;canvas.height image.height;c…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-04

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-04 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-11-04目录1. Alopex: A Computational Framework for Enabling On-Device Function Calls with LLMs摘要:研究背景&…

Python 人脸检测:使用 Dlib 和 OpenCV

简介 本文用Python、Dlib 和 OpenCV 库来检测图像中的人脸,并在人脸上绘制矩形框进行窗口显示。 环境准备 在开始之前,请确保您的计算机上已安装 Python。此外,您还需要安装以下库: dlib:一个包含多种机器学习算法…

JavaScript逆向爬虫教程-------基础篇之JavaScript密码学以及CryptoJS各种常用算法的实现

目录 一、密码学介绍 1.1 为什么要学密码学?1.2 密码学里面学哪一些 二、字符编码三、位运算四、Hex 编码与 Base64 编码 4.1 Hex 编码4.2 Base64 编码 五、消息摘要算法 5.1 简介5.2 JS中的MD5、SHA、HMAC、SM3 六、对称加密算法 6.1 介绍6.2 加密模式和填充方式6.3 CryptoJ…

go语言中的切片含义和用法详解

Go 语言中的切片(slice)是引用类型,它提供了一种灵活的方式去操作一系列具有相同类型的数据。与数组不同,切片的长度不是固定的,可以动态地增长或缩小。切片在 Go 语言中非常常用,因为它们提供了高效且方便…

使用 OpenAI 进行数据探索性分析(EDA)

#探索性数据分析(Exploratory Data Analysis, 简称 EDA)是数据分析中不可或缺的环节,帮助分析师快速了解数据的分布、特征和潜在模式。传统的 EDA 通常需要手动编写代码或使用工具完成。现在,通过 OpenAI 的 GPT-4 模型&#xff0…

【软考】系统架构设计师-数据库设计基础

数据库核心考点 三级模式-两级映射 外模式--视图 概念模式--表(模式、基本表) 内模式--物理文件 数据库设计 概念结构设计:属性冲突、命名冲突、结构冲突 逻辑结构设计:关系模式(层次模型、网络模型&#xff09…

2、计算机网络七层封包和解包的过程

计算机网络osi七层模型 1、网络模型总体预览2、数据链路层4、传输层5.应用层 1、网络模型总体预览 图片均来源B站:网络安全收藏家,没有本人作图 2、数据链路层 案例描述:主机A发出一条信息,到路由器A,这里封装目标MAC…

图像重建之深度学习重建

图像重建是计算机视觉领域的一个重要任务。深度学习在图像重建中具有很强的能力和广泛的应用。下面介绍一种常见的深度学习图像重建方法:基于生成对抗网络(Generative Adversarial Networks,GANs)的图像重建。 基于 GAN 的图像重…

使用 PyTorch-BigGraph 构建和部署大规模图嵌入的完整教程

当涉及到图数据时,复杂性是不可避免的。无论是社交网络中的庞大互联关系、像 Freebase 这样的知识图谱,还是推荐引擎中海量的数据量,处理如此规模的图数据都充满挑战。 尤其是当目标是生成能够准确捕捉这些关系本质的嵌入表示时,…

国标GB28181视频平台EasyCVR视频融合平台H.265/H.264转码业务流程

在当今数字化、网络化的视频监控领域,大中型项目对于视频监控管理平台的需求日益增长,特别是在跨区域、多设备、高并发的复杂环境中。EasyCVR视频监控汇聚管理平台正是为了满足这些需求而设计的,它不仅提供了全面的管理功能,还支持…

2411rust,正与整128

原文 长期以来,Rust在x86-32和x86-64架构上128位整数的对齐与C语言不一致.最近已解决此问题,但该修复带来了一些值得注意的效果. 作为用户,除非如下,否则不用担心: 1,假设i128/u128对齐,而不是用align_of 2,忽略improper_ctypes*检查,并在FFI中使用这些类. 除x86-32和x86-64…