CSS-下拉菜单被覆盖

最新推荐文章于 2023-03-09 18:18:32 发布
最新推荐文章于 2023-03-09 18:18:32 发布
阅读量6.9k 收藏 6
点赞数 2
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wengyuyu1234/article/details/76228368
版权

问题：做了个网站的导航栏带有下拉菜单，鼠标放在导航栏上就会显示下拉菜单，现在下拉菜单被覆盖了。

解决：设置当前的div的style属性，新增position和z-index

<div class="box" style="position:relative; z-index:9999;">

原因：Z-INDEX是设置不同块的层次的
position 属性规定元素的定位类型。
当元素的POSITION属性没有的时候，Z-INDEX是失效的。

position分为：
这里写图片描述

具体参照：http://www.jb51.net/css/73529.html

Wengyuyu1234
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html下拉菜单被轮播图遮挡,纯html+css的轮播图问题
weixin_39535287的博客
06-03 1525
html：123css：.slide{width: 200px;height: 80px;position: relative;margin: 0 auto;overflow: hidden;background-color: #f00;}.slide-content{width: 100%;height: 100%;position: absolute;right: -100%;top: 0;a...
CSS的下拉菜单被挡住，修改Z-INDEX也不成功
bloodyallen的专栏
04-19 1万+
做了一个鼠标放上去就出现的下拉菜单，但是这个下拉的内容被挡住了。 Z-INDEX是设置不同块的层次的，我修改了问题还是有。 后来发现是 当元素的POSITION属性没有的时候，Z-INDEX是失效的。 下面更详细的解释来自http://www.jb51.net/css/73529.html 1.第一种情况（z-index无论设置多高都不起作用情况）：  这种情况发生的条件有三个：
(css)解决弹窗下的下拉选择框被遮挡或显示不全问题
nyf_unknow的博客
07-26 4160
(css)解决弹窗下的下拉选择框被遮挡或显示不全问题
CSS position开启了绝对定位但是下拉弹窗还是被遮挡 o
LlanyW的专栏
03-09 1582
里面li里设置一个鼠标移动上去显示的div，因为设置了overflow hidden导致不能完整显示。最外层父元素设置溢出隐藏之后，里面的下拉弹窗会被裁剪，即使用了float,加绝对定位。把其注释之后可以完整显示。
导航下拉菜单被遮住或显示不全问题所在和解决办法【笔记】
weixin_30924087的博客
05-05 1045
参考网址： 导航下拉菜单被遮住或显示不全问题所在和解决办法 一、导航下拉菜单被遮住，那是因为层叠关系错误 我们必须理解层叠关系满足的2个条件： 1、必须是同级； 2、二者分别设定了position:relative 或 absolute 或 fixed； 这时候通过设置z-index才有效 二、导航下拉菜单显示不全是因为外层设置了overflow:hidden 很多时因为网...
css父元素覆盖子元素样式_用CSS解决！ 基于给定元素数的逻辑样式
CSS 初学者指南
07-10 1549
这篇文章是有关CSS功能的系列文章中的第三篇。 文章系列： 为SVG背景着色 下拉菜单 基于给定元素数的逻辑样式（本篇文章） 您知道CSS图灵完成吗？ 您是否知道您可以使用它来进行一些非常严肃的逻辑样式设计？ 好吧，你可以！ 您不必在JavaScript中设置所有基于逻辑的样式规则，甚至不必使用JavaScript来设置要针对其进行样式设置的类。 在许多情况下，C...
CSS 下拉菜单
weixin_43535265的博客
03-11 903
使用 CSS 创建可悬停的下拉列表。 1. 基础的下拉菜单 创建当用户将鼠标移到元素上时出现的下拉框。 代码如下： <!DOCTYPE html> <html> <head> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-co
CSS-表单进阶-下拉菜单
weixin_57936267的博客
04-22 548
CSS-表单进阶-下拉菜单
幻灯片挡住CSS导航下拉菜单或者飘浮广告的解决方法
09-25
在网页设计中，我们经常会遇到各种布局和交互上的问题，其中一种常见的问题是幻灯片（通常包含图片轮播效果）遮挡了CSS导航下拉菜单或浮动广告。这主要是由于HTML元素的堆叠顺序（也称为层叠上下文，Z-index）导致的...
css3下拉菜单
06-18
较完善，下拉式三级菜单，覆盖式，有阴影。适合ie 11,猎豹，火狐，高度精简，有注释。
能挡住下拉表单的CSS+JS下拉菜单
05-27
很漂亮的能挡住下拉表单的CSS+JS下拉菜单.
JavaScript简单下拉菜单实例代码
10-23
在这个实例中，我们将探讨如何使用JavaScript和CSS来创建一个简单的下拉菜单，并实现渐显效果。 首先，HTML结构是构建下拉菜单的基础。在这个例子中，我们看到使用了`<div>`元素来组织菜单，其中`<dt>`表示菜单项，...
巧用jquery解决下拉菜单被Div遮挡的相关问题
12-12
用jquery的hover事件，当鼠标移动到menu时，把遮挡下拉菜单的div设置为负值，鼠标离开时恢复正值， 代码如下： 代码如下:$(“#menu”).hover( function() { $(“.divName”).css(“z-index”, “-1”); }, function...
react-dropdown-select:可自定义的下拉菜单用于做出React
04-28
React下拉选择可自定义的下拉菜单用于做出React特征可通过prop s配置通过渲染道具回调（可访问内部道具，状态和方法），所有内部组件的总...覆盖可通过CSS（或自定义组件）设置样式门户支持在本地DOM树之外呈现下拉菜单...
css样式点击菜单不被覆盖,CSS菜单和子菜单覆盖样式
weixin_35726635的博客
08-04 243
如何确保子菜单不使用主菜单中的任何样式？我正在使用的内容似乎继续采用.nav-left li.link a和.nav-left li.link a：hover的风格。CSS菜单和子菜单覆盖样式#nav {position:relative; width:960px;}#nav .nav-left, .nav-right {position:relative;}#nav .nav-left ul, ...
CSS： 下拉菜单
weixin_43731793的博客
06-10 362
1、简介 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 2、 我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素。 使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上。 使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。 CS...
导航菜单下拉框被文本框挡住覆盖，显示不全，如何置顶最前显示以及背景透明度？
weixin_47336389的博客
12-22 1609
解决办法： 在需要置顶显示的内容上加上： position：relative; z-index：2; 注意： 两句代码一个不能少，只写了最后一个是没有效果的，我之前一直都搞不出来就是因为少写了上面一句。 如果没有用： 可能是因为遮挡的那个内容z-index的值比需要置顶显示的内容值要大，所以在给本来要在下面的文本框加上： position：fixed; z-index：1; 背景透明度： 解决完显示问题之后：还有一个背景看起来比较透明： 在需要置顶并且背景透明内容上加上： opacity：1； 知识点： .
html导航下拉菜单被遮住,导航下拉菜单被遮住或显示不全问题所在和解决办法...
weixin_35192920的博客
06-05 7329
导航下拉菜单被banner遮住/显示不全，这种问题是老生常谈了，经常有新手会问，有些人做了2、3年的还会经常犯错，而且好多人还以为是js问题，其实这是基本的css知识。我觉得还是有必要写一遍文章解释给新手们。一、导航下拉菜单被遮住，那是因为层叠关系错误我们必须理解层叠关系满足的2个条件：1、必须是同级；2、二者分别设定了position:relative 或 absolute 或 fixed；这时...
前端排坑记录：解决下拉菜单被图片或DIV遮挡问题
热门推荐
weixin_40120737的博客
05-15 1万+
下拉菜单被下面的各种奇奇怪怪的元素遮挡，被图片遮挡、被P标签遮挡。。。一开始遇到这个问题的时候，我也想到了肯定是z-index的缘故，然后就去给下拉菜单了一个position:relative; z-index:999;本以为可以解决问题，结果一经测试，还是老样子，如图：然后就是各种尝试，给遮挡它的元素也设置z-index:9;给下拉菜单的子元素设置z-index:999。。。还是没一点反应求助度...
html导航栏下拉菜单不被下面内容挡住
最新发布
04-28
要实现导航栏下拉菜单不被下面内容挡住，可以使用CSS的z-index属性。z-index属性用于设置元素的堆叠顺序，数值越大的元素越靠近顶层，可以覆盖数值较小的元素。 具体实现方法如下： 1. 给导航栏设置一个较高的z-index值，例如1000。 2. 给下拉菜单设置一个更高的z-index值，例如2000。 3. 给下面内容设置一个较低的z-index值，例如0。 这样就可以保证下拉菜单始终在页面上方。同时，要注意设置下拉菜单的position属性为absolute或fixed，否则z-index属性不起作用。 示例代码： HTML： ``` <nav> <ul> <li><a href="#">菜单1</a></li> <li><a href="#">菜单2</a> <ul> <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> </ul> </li> <li><a href="#">菜单3</a></li> </ul> </nav> <div class="content"> <p>这是下面的内容</p> </div> ``` CSS： ``` nav { position: relative; z-index: 1000; } nav ul ul { position: absolute; top: 100%; left: 0; z-index: 2000; } .content { z-index: 0; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值