导航栏下拉菜单会顶掉页面下方文字解决方法

最新推荐文章于 2024-05-02 14:26:53 发布
最新推荐文章于 2024-05-02 14:26:53 发布
阅读量235 收藏
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ardo233/article/details/134590871
版权

引用z-index属性，表示盒子在当前层叠上下文中的层叠等级。将文字div盒子设置位置为absolute（因为z-index只能在位置元素中设置），再将导航栏z-index设置的值比文字所在div的z-index值高即可。0a5f0784c60942ddaa59a46c38d20e06.png

c1917c577a6b4a6a9a0f128ac2b2f633.png

 

如果文字盒子位置修改成absolute不好调整参数，可在外嵌套父盒子设置位置为relative。

界面实现效果如图：

7add5ca53e574d11ae3f021d23060ef6.png

 

 

 

ardo233
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iOS实现顶部标签式导航栏及下拉分类菜单
01-05
本文实例为大家分享了iOS实现顶部标签式导航栏及下拉分类菜单的全部过程，供大家参考，具体内容如下 当内容及分类较多时，往往采用顶部标签式导航栏，例如网易新闻客户端的顶部分类导航，最近刚好有这样的应用场景，参考网络上一些demo，实现了这种导航效果，记录一些要点。 效果图（由于视频转GIF掉帧，滑动和下拉动画显得比较生硬,刚发现quickTime可以直接录制手机视频，推荐一下，很方便） 1.顶部标签式导航栏 （1）实现思路 其实就是在上下两个UIScrollView上做文章，实现联动选择切换的效果。 ①顶部标签导航栏topCategoryListScrollView加载显示分类数据，下方co
下拉二级菜单顶开下面内容的解决方法
m0_54970415的博客
03-28 8022
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、 发现问题二、分析原因三、解决方法1. 使用定位2. 使用z-index四、需要注意的问题 一、 发现问题 做完二级菜单之后写了一个p标签插入文本内容，结果出现下拉菜单把文本内容向下顶开的现象，如下图所示 二、分析原因 没有使用定位，当ul显示时是要占空间的，由此导致下面的元素被挤下去。 三、解决方法 1. 使用定位 代码如下 ： .item{ float: left; .
下拉菜单CSSdemo
08-08
纯CSS下拉菜单的DEMO样例，可以直接使用，植入方便无需改动
用js实现导航栏shoufang效果_导航栏下拉菜单会遮住下面导航栏的解决办法-布布扣...
weixin_39945816的博客
11-05 228
最近写实验室的门户网站，想要实现大屏状态下鼠标经过下拉框显现(不占有位置)，小屏时因为导航栏竖着显示，为了观看方便，想要下拉框占据位置，即会把下面的导航栏往下“推”。想要实现的效果如下图所示结果不知为何这两个状态下导航栏都是不占有位置的状态，如下图所示后来发现是由于给用来实现导航栏的li设置了一个宽度改为以下情况即可实现所想功能这就不禁让我开始思考一个问题：是否对于一个固定宽高的盒子，如果...
网站导航栏有下拉菜单，但是下拉菜单出现后会把下面的内容顶下去，
weixin_30474613的博客
10-10 5899
解决方法：是在下拉菜单层设置css:position:absolute;z-index:999; position:absolute:绝对定位，和上下文无关。 转载于:https://www.cnblogs.com/guanyushan/p/7648234.html
html div挤下去了,网站固定导航条挤动下面的DIV_html/css_WEB-ITnose
weixin_29253711的博客
07-19 538
这是导航栏CSSwidth: 1336px; background: #333; margin-top: 0px; font-size: 20px; z-index:9999;这是下面div的CSS(这里覆盖了三个div这是最底层的div的css)border: 2px white solid; ...
html下拉菜单会影响下一行,CSS下拉菜单导致后续内容无法撑满页面
weixin_39808893的博客
06-03 1029
问题描述初学CSS，打算做一个下拉菜单。目标结果是：“下拉菜单”那个显示的就是一个下拉菜单。但是如果在CSS中把下拉菜单周围的border去掉，内容部分就无法占满整行：问题出现的环境背景及自己尝试过哪些方法怀疑和.topnav中设置的overflow: hidden;属性有关，但是把这个属性去掉，下拉菜单就被隐藏了相关代码layout.html* {box-sizing: border-box;}...
Android项目导航菜单横向左右滑动并和下方的控件实现联动.rar
09-09
Android项目导航菜单横向左右滑动并和下方的控件实现联动.rar
jquery仿微软网站导航全屏下拉菜单代码
09-22
jquery仿微软网站导航全屏下拉菜单代码
BTNavigationDropdownMenu：用Swift编写的优雅而实用的下拉菜单，出现在导航栏下方，以在用户单击导航标题时显示已定义项目的列表
02-03
介绍用Swift编写的优雅而实用的下拉菜单出现在导航栏下方，以在用户单击导航标题时显示已定义项目的列表。安装可可豆BTNavigationDropdownMenu可通过。 要安装它，只需将以下行添加到您的Podfile中： use_frameworks...
JQuery实现鼠标滑过显示导航下拉列表
12-11
这就是用javascript实现的一个导航栏下拉列表。小编一步步给大家讲解。值得注意的是我们使用的是Javascript的一个框架Jquery来实现的。所以，你在使用的时候必须要下载Jquery。 先建立HTML代码 代码如下: <...
Vue 多个下拉框放一起出现bug？
qq_50617612的博客
06-03 112
BUG：当任意一个下拉框选中后，另一个下拉框会显示选中下拉框的value值。如图，在一行里面有两个下拉框，一个文本框和一个搜索按钮。解决方法：将两个下拉框的 v-model 改一下就好了。
el-select下拉框多选显示的文本内容过长导致显示溢出框外的解决方案
weixin_43925947的博客
07-09 3636
.box .el-form .el-select__tags-text { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logMgCls .el-select .el-tag__close.el-icon-close { top: -7px; }
【Web】CTFSHOW 中期测评刷题记录(1)
最新发布
uuzeray的博客
05-02 1861
访问./cache/6a992d5529f459a44fee58c733255e86.php，命令执行拿flag。login.php是在./templates下的，而./flag.php与./templates均为web目录。注意到用./template/error.php中存在{{username}}，可以用其cache来写马。这时候重开下靶机再去读./templates/index.php，发现是给了提示的。访问./config/settings.php，命令执行拿到flag。
html导航栏下拉菜单
09-16
HTML导航栏下拉菜单就是在网页中的导航栏中添加一个下拉菜单，用于显示更多的导航选项。下面我将简要介绍如何在HTML中创建这样的下拉菜单。 首先，我们需要在HTML中创建一个导航栏。通常，导航栏使用`<nav>`元素来...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值