【已解决】使用 z-index 解决不同层级元素互相遮挡的问题

已于 2023-03-21 10:25:43 修改
阅读量662 收藏 1
点赞数
分类专栏： Bug 记录 CSS 文章标签： css
于 2023-03-07 15:54:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bugu_hhh/article/details/129384021
版权

项目场景

博客网站的首页

问题描述

轮播图遮挡住了导航栏的下拉框

原因分析

尝试修改下拉框的 z-index 值，发现无效果

后来发现，根本原因不是 轮播图本身 的层级高

而是轮播图父盒子的层级比下拉框父盒子的层级高

如果仅修改子元素的层级，是不起效果的，因为他俩根本不是同级的元素

解决方案

增加下拉框父盒子的层级，使其高于轮播图父盒子的层级即可

写代码的不谷
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
css设置z-index 失效的解决方法
09-25
为了解决`z-index`失效的问题，首先检查元素是否已设置适当的定位属性。如果仍然存在问题，可能的原因包括： - 父元素的`z-index`：如果元素在一个具有较高`z-index`的父元素内，即使元素本身的`z-index`很高，也...
div层调整z-index属性在IE中无效原因分析及解决方法
12-13
这意味着即使子元素的z-index值很高，如果其最近的relative定位的父元素的z-index较低，子元素也可能被其他元素遮挡。 例如： ```html ; z-index:1000;"> ; z-index:1;"> ; z-index:9999;"> ``` 在这个...
z-index上层元素遮挡下层元素点击事件解决
最新发布
weixin_39667153的博客
06-30 539
有一个地图页面，地图上面添加了div样式z-index:1遮盖了地图z-index:0，导致此部分地图无法实现拖拽和缩放。
z-index高级别的覆盖不了低级别的问题
demon_hunter0919的博客
01-05 894
问题:打开弹窗，再打开导航栏，导航栏的下拉框被弹窗给遮盖了。看了下页面元素，导航栏的z-index:2000;而弹窗只有1000。 在网上找了下，原因如下：z-index只是比较同级元素，如果父元素的级别低，即使子元素级别再高也没用。 开始找：判断弹窗和导航栏是不是同级元素，ok，不是。 找导航栏的父元素看它的z-index，没有找到，再找父父元素。。。...
css 设置z-index也被挡住解决方案
wnk1997的博客
04-21 485
百度了半天，最后发现是最外层overflow导致的，外层如下设置即可。
css中z-index无效解决方法
前端蜗牛君
10-22 2723
问题： 设置z-index很大，但是仍然被其他元素遮挡 图片： 问题描述：即使设置弹窗div的z-index特别大，也会被阴影遮挡。 原因： 弹窗的父级节点（或祖辈节点）设置的z-index值小于阴影的z-index的值，所以，即使设置弹窗的z-index比阴影的z-index大，也会在阴影下面。 解决： 去掉弹窗父级节点的z-index属性，或者设置弹窗父级节点的z-index大于阴影 父级元素溢出隐藏或者不显示 如果父元素设置了 overflow:hidden /display:none/ 等，那么子元
html5盒子层级设置,解决CSS中子元素z-index与父元素兄弟节点的层级问题
weixin_33212915的博客
06-20 1034
1.问题的出现写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。元素的结构大致如下：列表项1弹出框1列表项2列表项3弹出框3部分样式如下：.unit{position: relative；z-index: 1;}.hover{position: absolute;z-index: 10;}实际效果如下：列表项...
解决CSS中子元素z-index与父元素兄弟节点的层级问题
01-19
1.问题的出现 写了一个平铺的列表，其中有些列表项具有hover出现的弹出框。希望达成的目标是弹出框展现时，要把列表项内容遮盖住，以保证弹出框内容优先展示。 元素的结构大致如下： 列表项1 弹出框1 ...
PHP 百度编辑器UEditor自定义层级z-index(层次太高).rar
09-16
在处理复杂页面布局时，我们可能会遇到元素层级（z-index）的问题，尤其是当UEditor与其他组件或者弹窗系统交互时。本资源"PHP 百度编辑器UEditor自定义层级z-index(层次太高)"着重讲解了如何解决UEditor的层级过高...
解决控件遮挡问题：关于有窗口元素和无窗口元素
10-31
"解决控件遮挡问题：关于有窗口元素和无窗口...解决控件遮挡问题需要了解有窗口元素和无窗口元素的概念，并正确地使用z-index属性。通过将元素封装进一个DIV中，并设置DIV的z-index属性，我们可以解决控件遮挡问题。
关于css 父级 影响 子级 z-index层级问题
weixin_43311271的博客
06-01 424
如题，经过排查，发现是父级使用了 animation-fill-mode: forwards;造成了z-index失效，暂时没有找到解决方法，只能将其与父级定义在同一层。
css之层叠级别及z-index
Rita_jing的博客
03-30 1797
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 每个stacking context都包括以下stack level （后来居上）： 1.父级stacking context的背景、边界 2.z-index值为负值的定位元素（值越小越在下） 3.文本流中非定位的、block块级子元素 4.文本流中非定位的、float浮动子元素 5.仿
z-indx不生效原因-父元素设置了overflow: hidden
weixin_40918145的博客
04-29 661
z-indx不生效原因-父元素设置了overflow: hidden
html根标签遮挡住所有元素,在html标签，z-index常见遮挡问题
weixin_42316079的博客
06-19 1003
[参与测试的浏览器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ][操作系统：Windows]貌似很多同学对为什么这个div在上层，那个div在下层、无论如何设置z-index都无法居上的问题纠结抓狂、上吐下泻、恶心失眠、郁郁而终，致使不敢随意使用层的叠加。但层的叠加效果，在交互设计中却频频出现，所以我们必须驾驭它，要驾驭它，就要掌握其规律。首先明确...
html和js实现滚动条效果
weixin_30414305的博客
07-13 98
HTML部分 <!-- 遮罩层 --> <div id="zzc" style="z-index:-1;height:100%;width: 100%; position:absolute;left:0px;top:0px;bottom:0px; background-color:#000;opacity:0.8;"></div&g...
前端选项卡无法选中，被图片遮挡
qq_65061974的博客
06-27 149
可以看出来选项卡的z-index是999999，远大于图片的z-index。所以只需要在选项卡的css中将position设置为static以外的即可。在页面中使用右键，通过检查可以看到。另外可以多通过网页检查发现问题。前端图片部分css代码如下。但是为什么会出现遮挡现象？这样选项卡就不会被图片遮挡。vue选项卡css如下。
Z-index无效元素仍被遮挡解决办法
coderDouble的博客
03-31 2154
在元素添加position属性如果是static（等同于没有设置 position，因为 static 就是默认值）反之，如果 position 值是 relative, absolute, fixed 元素则会产生层级关系，使用z-index可以改变在父元素中设置了position值的子元素的层级。元素z-index属性无效化，原因在于自己的父元素，和其他元素的父元素，虽然都在爷元素中开启了定位，但是某个父元素并未设置z-index值，无法进行层级比对谁高谁低。
CSS3中z-index不生效怎么办？
金木编程
06-27 4125
确保要设置 z-index 的元素具有正确的定位属性。如果要使一个元素位于另一个元素之上，两个元素应该是兄弟节点（即拥有同一个父元素），并且具有相应的定位属性和 z-index 值。5、z-index 值过大或过小：z-index 值应该是一个整数，较大的值会使元素在层叠顺序中更靠前，较小的值则会使元素在层叠顺序中更靠后。3、父元素的 z-index 值：父元素的 z-index 值可能会影响子元素的层叠顺序。4、元素被其他元素遮挡：如果一个元素被其他元素完全遮挡，那么它的 z-index 值不会生效。
css z-index值小的覆盖值大的
web_ding的博客
09-01 804
css z-index值小的覆盖值大的
el-date-picker 层级遮挡
06-08
如果您使用的是 Element UI 的 `el-date-picker` 组件，并且出现了层级遮挡的问题，可以考虑对其进行样式调整。 可以给 `el-date-picker__editor-wrap`、`el-date-picker__time-header`、`el-date-picker__header`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

写代码的不谷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值