首页 前端知识 CSS position开启了绝对定位但是下拉弹窗还是被遮挡 o

CSS position开启了绝对定位但是下拉弹窗还是被遮挡 o

2024-02-17 09:02:21 前端知识 前端哥 259 359 我要收藏

最外层父元素设置溢出隐藏之后,里面的下拉弹窗会被裁剪,即使用了float,加绝对定位。

/*顶部栏*/
.site-topbar {
    height: 40px;
    color: #b0b0b0;
    background: #333;
    font-size: 12px;
    /*不能设置,否则 下拉窗体不会出来 */
    overflow: hidden;
}复制

 

里面li里设置一个鼠标移动上去显示的div,因为设置了overflow hidden导致不能完整显示。

把其注释之后可以完整显示 

<style>
/*顶部栏*/
.site-topbar {
height: 40px;
color: #b0b0b0;
background: #333;
font-size: 12px;
/*不能设置,否则 下拉窗体不会出来 */
/*overflow: hidden;*/
}
.topcontent .topnav {
float: left;
}
.topnav ul {
/*float: left;*/
/*弹性盒子*/
display: flex;
}
.download {
position: relative;
z-index: 9999;
}
/*二维码*/
.download .appcode {
width: 124px;
display: none;
font-size: inherit;
background-color: #fff;
color: #333;
cursor: pointer;
left: -50%;
top: 1px;
text-align: center;
box-shadow: 0 1px 5px #aaa;;
position: absolute;
z-index: 9999999999;
}
.download:hover .appcode {
display: block;
}
</style>
<div class="site-topbar">
<div class="topcontent w">
<div class="topnav">
<ul>
<li>
<a href="#" class="download">下载app
<div class="appcode">
<img src="./imgs/appcode.png" alt="">
<div class="name">小米商城APP</div>
</div>
</a>
</li>
</div>
</div>
</div>
复制

效果:

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2200.html
标签
评论
发布的文章

jquery.动画和事件

2024-03-03 11:03:13

jQuery位置方法

2024-03-03 11:03:13

jQuery中val()和text()的区别

2024-03-03 11:03:11

jquery实现甘特图时效管理

2024-03-03 11:03:47

django之 echarts数据可视化

2024-03-03 11:03:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!