为什么这个 drop-down div 当我移到它下面的 iframe 上时消失了？

Question

我有一个包含下拉菜单的 header。 header 下方是内容的 "body"，完全由 iframe 填充。当您将鼠标悬停在 "Pick a game..." 下拉菜单上，并将鼠标移到 iframe 上方的 div 部分时，div 会消失，就像您将鼠标移开一样.想亲身体验的请看下面笔

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

笔数：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>

Answer 1

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

为什么这个 drop-down div 当我移到它下面的 iframe 上时消失了？

Why does this drop-down div disappear when I move over the iframe below it?

html

css

drop-down-menu

sass

haml