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

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

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

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

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

1.  
   <style>
2.  
   /*顶部栏*/
3.  
   .site-topbar {
4.  
   height: 40px;
5.  
   color: #b0b0b0;
6.  
   background: #333;
7.  
   font-size: 12px;
8.  
   /*不能设置，否则 下拉窗体不会出来 */
9.  
   /*overflow: hidden;*/
10.  
    }
11.  
    .topcontent .topnav {
12.  
    float: left;
13.  
    }
14.  
     
15.  
    .topnav ul {
16.  
    /*float: left;*/
17.  
    /*弹性盒子*/
18.  
    display: flex;
19.  
    }
20.  
    .download {
21.  
    position: relative;
22.  
    z-index: 9999;
23.  
    }
24.  
     
25.  
    /*二维码*/
26.  
    .download .appcode {
27.  
    width: 124px;
28.  
    display: none;
29.  
    font-size: inherit;
30.  
    background-color: #fff;
31.  
    color: #333;
32.  
    cursor: pointer;
33.  
    left: -50%;
34.  
    top: 1px;
35.  
    text-align: center;
36.  
    box-shadow: 0 1px 5px #aaa;;
37.  
    position: absolute;
38.  
    z-index: 9999999999;
39.  
    }
40.  
     
41.  
     
42.  
    .download:hover .appcode {
43.  
    display: block;
44.  
    }
45.  
     
46.  
    </style>
47.  
     
48.  
     
49.  
    <div class="site-topbar">
50.  
    <div class="topcontent w">
51.  
    <div class="topnav">
52.  
    <ul>
53.  
    <li>
54.  
    <a href="#" class="download">下载app
55.  
    <div class="appcode">
56.  
    <img src="./imgs/appcode.png" alt="">
57.  
    <div class="name">小米商城APP</div>
58.  
    </div>
59.  
    </a>
60.  
    </li>
61.  
    </div>
62.  
    </div>
63.  
    </div>

效果：

这篇好文章是转载于：学新通技术网