Question

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

此外，如果您打开iframe的边框，则边框将通过下拉菜单显示。这让我相信iframe会以某种方式呈现在dropdown 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'的元素，也无关紧要，因为绝对定位元素将位于其下方位置：static的任何元素之上。

当我移动到它下方的iframe时，为什么这个下拉div会消失？

1 个答案: