Z-Index 无法制作包含下拉菜单重叠导航的 div答案

【问题标题】：Z- Index isn't working to make div that contains dropdown menu overlap navigationZ-Index 无法制作包含下拉菜单重叠导航的 div
【发布时间】：2017-05-17 01:14:59
【问题描述】：

我目前正在构建一个网站，并且非常希望我的“4 个位置”下拉菜单能够正常工作。但是导航菜单与它重叠。我最初的想法是让我们 Z-index 将其堆叠在主导航之上，但它没有帮助。我能做些什么？？查看：去http://pcfm.adamerica.me/

这是 CSS：

/* Dropdown Button */
.location-dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 10px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.location-dropbtn:hover, .location-dropbtn:focus {
    background-color: #3e8e41;
}

/* The container div - needed to position the dropdown content */
.location-dropdown {
    position: absolute;
    display: inline-block;
    margin-top: -10px;
    margin-left: 20px;
    margin-right: 20px;
    z-index: 110001;
}

/* Dropdown Content (Hidden by Default) */
.location-dropdown-content {
    display: none;
    position: absolute;
    background-color: #4CAF50;
    color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 110001;
}

/* Links inside the dropdown */
.location-dropdown-content a {
    color: #ffffff;
    font-size: 12px;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    z-index: 110001;
}

/* Change color of dropdown links on hover */
.location-dropdown-content a:hover {
    background-color: #3e8e49
}

 /* Show the dropdown menu */
.show {
    display:block;
    z-index: 110001;
}

【问题讨论】：

标签： css drop-down-menu navigation z-index overlapping

【解决方案1】：

这会起作用

header {
    z-index: 1000;
}

【讨论】：

【解决方案2】：

您的 .location-dropdown .show 的 z-index：110001。
您的 .responsive-header 类具有 z-index:100000 （这种方式在小于 980px 的媒体上正常工作）

在大于 980 像素的媒体上：

您的标题为 class="header2 sticky" 的 z-index: 100000000。问题出在这里，将此标题 z-index 更改为 110000 即可正常工作。

【讨论】：