当我在下面的iframe上移动时，为什么这个下拉div消失了

我有一个包含下拉菜单的标头。在该标头的下方是内容的"主体"，它完全由iframe填充。当您徘徊在"选择游戏..."下拉菜单上时，然后将鼠标移到iframe上的Div的部分时，该div就消失了，就好像您将鼠标移开了一样。如果您想自己尝试，请参阅下面的笔。

另外，如果您打开iFrame的边框，则边框将通过下拉列表显示。这使我相信，iframe在下拉div上方呈现。但是，即使有iframe z索引回去，它仍然显示。关于为什么我无法获得第二个下拉选项的任何想法？

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

问题是，具有'页面ID'的元素是位置：绝对，下拉列表不是。即使下拉列表的索引高于iFrame居住的"页面" ID的元素，也无关紧要，因为绝对位置元素将位于位置的任何元素的顶部：静态。p>

相关内容

最新更新

热门标签：