为什么当我移过它下面的 iframe 时，这个下拉 div 会消失？答案

【问题标题】：Why does this drop-down div disappear when I move over the iframe below it?为什么当我移过它下面的 iframe 时，这个下拉 div 会消失？
【发布时间】：2018-02-25 00:45:18
【问题描述】：

我有一个包含下拉菜单的标题。在该标头之下是内容的“主体”，它完全由 iframe 填充。当您将鼠标悬停在“选择游戏...”下拉菜单上，并将鼠标移到该 div 位于 iframe 上方的部分上时，该 div 就会消失，就像您将鼠标移开一样。如果您想自己尝试，请参阅下面的笔。

此外，如果您打开 iframe 的边框，则边框将通过下拉菜单显示。这使我相信 iframe 以某种方式呈现在下拉 div 上方；然而，即使 iframe z-indexed back，它仍然显示。关于为什么我无法进入第二个下拉选项的任何想法？

笔：https://codepen.io/Spirit_Ryu/pen/PJwrKp/

@font-face {
  font-family: Baumans;
  src: url("./data/Baumans-Regular.ttf");
}
body {
  margin: 0 0 0 0;
  overflow-x: hidden;
}

a {
  color: black;
  text-decoration: none;
}
a:hover {
  color: #666666;
}

iframe {
  border: 0;
  z-index: 1000;
}

#visibledata {
  position: absolute;
  width: 100%;
  font-family: Baumans, sans-serif;
}

#header {
  width: 100vw;
  background: #f5f5f5;
  padding-top: 16px;
  padding-bottom: 16px;
}
#header #name {
  display: inline;
  font-size: 20pt;
  margin-left: 20px;
}
#header #pickagame {
  cursor: pointer;
  float: right;
  width: 200px;
  padding: 4px;
  margin-right: 20px;
  background: #e8e8e8;
}
#header #pickagame .dropdown {
  display: none;
  list-style: none;
  z-index: 1;
}
#header #pickagame .dropdown li {
  padding-top: 8px;
}
#header #pickagame:hover .dropdown {
  display: inline;
}

#page {
  position: absolute;
  top: 63px;
  height: 100vh;
}
#page #game {
  height: 100%;
  width: 100vw;
}

<!DOCTYPE html>
<html>
  <head>
    <link href='./data/index.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <div id='visibledata'>
      <div id='header'>
        <a href='./index.html'>
          <div id='name'>All-Star Favorites Arcade</div>
        </a>
        <div id='pickagame'>
          Pick a game...
          <div style='float: right'>▼</div>
          <div class='dropdown'>
            <a href='./data/ArmorMayhem.html' target='gameWindow'>
              <li>Armor Mayhem</li>
            </a>
            <a href='./data/ArmorMayhem.html' target='gameWindow'>
              <li>Armor Mayhem</li>
            </a>
            <a href='./data/ArmorMayhem.html' target='gameWindow'>
              <li>Armor Mayhem</li>
            </a>
          </div>
        </div>
      </div>
      <div id='page'>
        <iframe id='game' name='gameWindow'></iframe>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

您需要将列表元素放在<ul> 中，这是第一个问题
@PaigeMeinke 强迫症...哈哈，会的

标签： html css drop-down-menu sass haml

【解决方案1】：

问题在于 id 为 'page' 的元素是 position: absolute，而下拉列表不是。即使下拉列表的索引比 iframe 所在的 id 为 'page' 的元素的索引更高，这也无关紧要，因为绝对定位的元素将位于任何 position: static 下面的元素之上。

【讨论】：

谢谢！如果我将position: absolute 添加到#pickagame div，它不会修复它。相反，通过从 #page div 中删除后者，可以修复它。
甜蜜，很高兴我能帮助您继续编码。这个世界上的代码越多越好！ :)