解决transform带来的z-index失效问题

news2025/1/22 8:34:37

现象如下:

 其实下拉列表已经设置了z-index:

 但是为什么z-index没有生效呢。

后来发现原来它的父级元素使用了transform进行垂直方向居中

 网上查询了相关资料,说: tranform由于会构造一个新的context层, 然后这个层的z轴优先级会最低巴拉巴拉的,什么的解决办法是通过设置:transform-style:preserve-3d; 和transform:translateZ(xx值); 

我试过了,没有作用。

然后看到一篇文章,说给被遮挡元素的外层容器(也就是父级容器)加上z-index,就可以解决。

https://segmentfault.com/q/1010000002480824

然后试了一下,果然解决了。

总结:解决transform带来的z-index失效问题的办法是给被遮挡元素的父级加上z-index属性

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

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

相关文章

通信原理板块——信道之无线信道和有线信道

微信公众号上线,搜索公众号小灰灰的FPGA,关注可获取相关源码,定期更新有关FPGA的项目以及开源项目源码,包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 1、信道 通信模型中的信道&#xf…

初探JVM

五道常问面试题 1.请你谈谈你对JVM的理解?java8虚拟机和之前的变化更新? 2.什么是OOM,什么是栈溢出StackOverFlowError?怎么分析? 3.JVM的常用调优参数有哪些? 4.内存快照如何抓取,怎么分析Dump文件?知道吗&#xf…

队列(Queue)的顶级理解

目录 1.队列(Queue) 的概念 2.单链表模拟实现队列 2.1创建队列 2.2入队列 2.3判断是否为空 2.4出队列 2.5获取队头元素 2.6完整代码: 2.7双向链表模拟实现队列代码 3.数组模拟实现队列代码 3.1创建队列 3.2判断是否为满 3.3检查是否为空 3.4插入元素 3…

时序分解 | MATLAB实现RIME-VMD霜冰优化算法优化VMD变分模态分解信号分量可视化

时序分解 | MATLAB实现RIME-VMD霜冰优化算法优化VMD变分模态分解信号分量可视化 目录 时序分解 | MATLAB实现RIME-VMD霜冰优化算法优化VMD变分模态分解信号分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 RIME-VMD【23年新算法】霜冰优化算法优化VMD变分模态分…

基于springboot跨国旅游系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

微信小程序ibeacon搜索功能制作

以下是一个完整的微信小程序代码示例,演示如何实现iBeacon搜索功能: // 在小程序页面中的js文件中编写代码Page({data: {beacons: [] // 存储搜索到的iBeacon设备信息},onReady() {// 初始化iBeaconwx.startBeaconDiscovery({uuids: [你的UUID], // 替换…

关于中了halo勒索病毒,这些你需要了解,勒索病毒解密数据恢复

一,什么是halo勒索病毒? halo勒索病毒是一种新兴的电脑病毒,其主要目标是加密受害者的文件并索要赎金以解锁。这种病毒利用各种手段进行传播,包括电子邮件、恶意网站、网络下载等方式。halo勒索病毒是一种相对较新的勒索病毒&…

免费敏捷需求管理工具,需求管理方案

​传统的瀑布工作模式使用详细的需求说明书来表达需求,需求人员负责做需求调研,根据调研情况编制详细的需求说明书,进行需求评审,评审之后签字确认交给研发团队设计开发。在这样的环境下,需求文档是信息传递的主体&…

Spring框架简介

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

GLSL ES着色器语言 使用矢量和矩阵的相关规范

目录 矢量和矩阵类型 下面是声明矢量和矩阵的例子: 赋值和构造 矢量构造函数 矩阵构造函数 构造矩阵的几种方式 访问元素 . 运算符 矢量的分量名 [ ]运算符 运算符 矢量和矩阵可用的运算符 矢量和矩阵相关运算 矢量和浮点数的…

JSP SSM 成果展示系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 JSP SSM 冬奥建设成果展示系统是一套完善的web设计系统(系统采用SSM框架进行设计开发,springspringMVCmybatis),对理解JSP java编程开发语言有帮助,系统具有完整的 源代码和数据库,系统主…

汇编语言Nasmide编辑软件

用来编写汇编语言源程序,Windows 记事本并不是一个好工具。同时,在命令行编译源程序也令很多人迷糊。毕竟,很多年轻的朋友都是用着 Windows 成长起来的,他们缺少在 DOS和 UNIX 下工作的经历。 我一直想找一个自己中意的汇编语言编…

无涯教程-JavaScript - CUMPRINC函数

描述 CUMPRINC函数返回start_period和end_period之间的贷款累计本金。 语法 CUMPRINC (rate, nper, pv, start_period, end_period, type)争论 Argument描述Required/OptionalRateThe interest rate.RequiredNperThe total number of payment periods.RequiredPvThe presen…

多输入多输出 | MATLAB实现CNN-LSTM-Attention卷积神经网络-长短期记忆网络结合SE注意力机制的多输入多输出预测

多输入多输出 | MATLAB实现CNN-LSTM-Attention卷积神经网络-长短期记忆网络结合SE注意力机制的多输入多输出预测 目录 多输入多输出 | MATLAB实现CNN-LSTM-Attention卷积神经网络-长短期记忆网络结合SE注意力机制的多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预…

分享一个基于python的个性推荐餐厅系统源码 餐厅管理系统代码

💕💕作者:计算机源码社 💕💕个人简介:本人七年开发经验,擅长Java、Python、PHP、.NET、Node.js、微信小程序、爬虫、大数据等,大家有这一块的问题可以一起交流! &#x1…

Web后端开发-总结

web后端开发现在基本上都是基于标准的三层架构进行开发的,在三层架构当中,Controller控制器层负责接收请求响应数据,Service业务层负责具体的业务逻辑处理,而Dao数据访问层也叫持久层,就是用来处理数据访问操作的&…

interview3-微服务与MQ

一、SpringCloud篇 (1)服务注册 常见的注册中心:eureka、nacos、zookeeper eureka做服务注册中心: 服务注册:服务提供者需要把自己的信息注册到eureka,由eureka来保存这些信息,比如服务名称、…

SpringMVC之文件上传下载以及jrebel的使用

目录 一、文件上传 1.1 导入依赖 1.2 配置文件上传解析器 1.3 配置服务器存放文件地址 1.3.1 点击编辑Configurations 1.3.2 将项目部署至tomcat服务器上 1.3.3 配置相对路径 1.4 导入PropertiesUtil工具类 1.5 编写resource.properties 1.6 添加sql 1.7 编写PageCo…

自适应迭代扩展卡尔曼滤波算法AIEKF估计SOC VS 扩展卡尔曼估计SOC

自适应迭代扩展卡尔曼滤波算法(AIEK) 自适应迭代扩展卡尔曼滤波算法(AIEK)是一种滤波算法,其目的是通过迭代过程来逐渐适应不同的状态和环境,从而优化滤波效果。 该算法的基本思路是在每一步迭代过程中&a…

分割等和子集【动态规划】

分割等和子集 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集,使得两个子集的元素和相等。 class Solution {//testpublic boolean canPartition(int[] nums) {if(nums null || nums.length 0) return false;int n nums…