首页 前端知识 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

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