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

本文介绍: 里面 li里设置一个鼠标移动上去显示的div，因为设置了overflow h id den导致不能完整显示。最外层父元素设置溢出隐藏之后，里面的下拉弹窗会被裁剪，即使用了float,加绝对定位。把其注释之后可以完整显示。

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

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

里面li里设置一个鼠标移动上去显示的div，因为设置了ov e rflow h i d den导致不能完整显示。

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

&lt;style&gt;
  /*顶部栏*/
        .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&gt;
 

<div class="site-topbar"&gt;
        <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>