iframe 后面的下拉菜单？答案

【问题标题】：Dropdown behind iframe?iframe 后面的下拉菜单？
【发布时间】：2019-08-31 06:17:06
【问题描述】：

我试图让我的下拉菜单停留在页面上的 iframe 元素上方。我知道这个问题经常被问到，但我的问题是当我将位置设置为相对而不是绝对时，我的 iframe 会出现问题，所以（据我所知）我不能使用 z-index。我知道我的代码非常混乱，我基本上只是试图以相同的比例将视频保持在页面中心，同时保持响应能力，然后将下拉菜单保持在视频上方。

这是我的 CSS

.dropbtn {
 background-color: inherit;
 font-family: 'Inconsolata', monospace;
 color: red;
 font-size: 18px;
 border: none;
}

.dropdown {
 position: relative;
 display: inline-block;
}

.dropdown-content {
 display: none;
 position: relative;
 min-width: 50px;
 background-color: white;
 padding: 10px;
}

.dropdown-content a {
 text-decoration: none;
 display: block;
 margin-top: 10px;
}

.dropdown-content a:hover { 
  color: black;
  text-shadow: 1px 1px rgba(256, 0, 0, .4);
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: white;}

这是 HTML

<nav>
  <a class="logo" href="index.html"></a>
  <div id="navbar">
  <span class="dropdown">
    <button class="dropbtn">work</a></button>
    <div class="dropdown-content">
      <a href="video.html">video</a>
      <a href="design.html">design</a>
      <a href="photo.html">photo</a>
    </div>
  </span>
  <a href="about.html">about</a>
  <a href="submit.html">submit</a>
  <a href="store.html">store</a><br>
</div>
</nav>

<style>

#vidframe {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

#vid {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 60%;
    margin-left: 20%;
    border: 0;
}

</style>

<body>
<div id="vidframe">
<iframe id="vid" src="https://www.youtube.com/embed/zb_m_ZomwHA" frameborder="0"></iframe>
</div>
</body>

【问题讨论】：

下拉菜单在哪里？
@N'Bayramberdiyev 哦，我的错 - 刚刚编辑了它。

标签： html css web iframe dropdown

【解决方案1】：

这是一个基于您的代码的简单解决方案：

.dropbtn {
    background-color: inherit;
    font-family: 'Inconsolata', monospace;
    color: red;
    font-size: 18px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    min-width: 50px;
    background-color: white;
    padding: 10px;
    z-index: 2;
}

.dropdown-content a {
    text-decoration: none;
    display: block;
    margin-top: 10px;
}

.dropdown-content a:hover {
    color: black;
    text-shadow: 1px 1px rgba(256, 0, 0, .4);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: white;
}

#vidframe {
    overflow: hidden;
    text-align: center;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    z-index: 1;
}

#vid {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

<nav>
    <a class="logo" href="index.html"></a>
    <div id="navbar">
        <span class="dropdown">
    <button class="dropbtn">work</button>
    <div class="dropdown-content">
      <a href="video.html">video</a>
      <a href="design.html">design</a>
      <a href="photo.html">photo</a>
    </div>
  </span>
        <a href="about.html">about</a>
        <a href="submit.html">submit</a>
        <a href="store.html">store</a>
        <br>
    </div>
</nav>

<div id="vidframe">
    <iframe id="vid" src="https://www.youtube.com/embed/zb_m_ZomwHA" frameborder="0"></iframe>
</div>

【讨论】：