【发布时间】：2020-05-27 23:05:28
【问题描述】：
W3Schools 的这个下拉菜单在我的编辑后似乎可以工作链接：1
不幸的是，另一个 <div> 元素阻止了它，.dropdown:hover 不起作用。2
当我将下拉图标很好地放置在不同的 div 中时发生这种情况3，
这也是由于阻塞 div 必须位于下拉列表的左侧。
（我正在尝试使悬停工作：当您将鼠标悬停在菜单图标上时应该会出现下拉选项。）
首先我将宽度设置为 75%。 但奇怪的是它没有用（我仍然保留它）
我已尝试更改所有内容的 z-index：
- 阻止 div/段落：-2
- 包含下拉菜单的容器：-1
- 下拉菜单：1
过了一会儿，我看到 z-index 只适用于具有
css position: absolute, relative, fixed, sticky
但是输入position: relative 不起作用。 †
我还从this other question 中发现了pointer-events: none;，但遗憾的是什么也没有。 †
在 Chrome 开发者工具中，下拉菜单上有一个橙色边距。
我将边距设置为 0，并使 div 和段落的边框可见。 不知何故，下拉菜单仍然没有打开。我不明白为什么它不显示 - 而且 Chrome 控制台不再显示任何橙色。
我还弄乱了 CSS 显示属性。默认情况下，它是一个块元素，占据整个宽度。4
内联使高度和宽度属性无效。其他大多数都是基于块和内联（或表格）的 - 但我仍然尝试（但他们失败了）它们。
不幸的是，所有这些都默默地失败了，除非我把阻塞的 div 变成了一个 span 元素，在这个元素中一切都崩溃了。
代码sn-p（说明： 5）
function menu(text) {
// respond
console.log(`Click success: ${text}`)
}
// 4 seconds to hover over the menu icon
setTimeout(function() {
document.getElementById("storyDiv").style.marginTop = "10%"
}, 4000)#gameMenu {
color: red;
}
#storyDiv {
position: relative;
display: inline-block;
width: 75%;
height: 75%;
margin: 0;
overflow-y: auto; /* Makes it scrollable if the text is too big */
border: 1px solid blue;
z-index: -2;
pointer-events: none;
}
#story {
margin: 0;
position: relative;
z-index: -2;
pointer-events: none;
border: 1px solid orange;
}
/* Edited dropdown from https://www.w3schools.com/howto/howto_css_dropdown.asp */
.dropdown {
position: absolute;
top: 10px;
right: 10px;
display: inline-block;
z-index: 1;
}
.dropdownContent {
display: none;
position: absolute;
top: 10px;
right: 10px;
min-width: 160px;
z-index: 1;
}
.dropdownContent button {
padding: 12px 16px;
font-size: 16px;
border: none;
display: block;
}
.dropdown:hover .dropdownContent {
display: block;
}
/* End of dropdown */
#infoContainer {
position: absolute;
top: 10px;
left: 76%;
width: 23%;
border: 1px solid dodgerblue;
z-index: -1;
/* [Result] text in the top-right corner blocks the menu,
Also for the demonstartion */
margin-top: 10%;
}
#playerInfo {
margin-top: 0;
}<head>
<!-- Menu symbol -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id='storyDiv'>
<p id='story'>
With i (color), em, ul, and li tags. As well as <br>br, and enough to expand the bottom-border enough so that it's visually below the menu icon, blocking it.<br>
</p>
</div>
<div id='infoContainer'>
<div class='dropdown'>
<span class="material-icons" id='gameMenu'>menu</span>
<div class='dropdownContent'>
<button onClick='menu("Instructions")'> Instructions </button>
<button onClick='menu("Settings")'> Settings </button>
<button onClick='menu("Credits")'> Credits </button>
</div>
</div>
<div id="playerInfo">
<p>Another div with other stuff in it.</p>
</div>
</div>
</body>-
https://www.w3schools.com/css/css_dropdowns.asp 和https://www.w3schools.com/howto/howto_css_dropdown.asp
（不必理解） -
下拉列表在一个div中，所以我最初以为它被它阻止了，或者是div中的其他元素之一。
-
它与（容器 div 的边框）重叠，出于审美原因，这是可见的。没有删除。嗯，本来图标是在左上角的，但是这对我说的
<p>的冒险故事来说太突兀了。 -
单击“运行”时，将鼠标悬停在红色菜单图标上。下拉菜单有效。取下鼠标，等到菜单 div 旁边的框弹出。将鼠标放回下拉菜单上。现在不行了
† 我尝试了所有（据我所知）（this）的组合。仅 <p>、仅 <div> 或两者都不起作用。
其他说明： 我只想让悬停工作，我不希望内容改变位置。
【问题讨论】：
-
我对您想要实现的目标感到非常迷茫。您能否发送一张图片，说明您的最终目标是什么，或者可能是一个已经使用此设计的网站？
-
您确实需要了解什么是“堆叠上下文”，何时使用“相对”和“绝对”定位以及在这方面如何使用
z-index。然而，给出的答案可以解决问题。不是想沾沾自喜，而是关于1。 ....（不必理解这一点）：再想一想.... -
将
body { outline: 1px dashed }添加到您的CSS 中，您会看到您实际上使用z-index: -1将#infoContainer定位在<body>下，因此阻止了对菜单的访问，因为body { ...z-index: 0... }在HTML 中是默认设置