Question

我想我真的有两个问题（查看website可能会提供更好的解释）：

尽管更改了z-index并将wmode设置为“透明”，但website上的iframe仍保留在其他所有内容之前。我真的找不到任何可能导致它的原因吗？

<div class="videoWrapper">
        <iframe position="absolute" width="100%" height="100%" src='http://www.pinkbike.com/v/embed/300624/?colors=ffae00' allowfullscreen wmode="transparent" frameborder='0'></iframe>
    </div>

CSS：

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 40%;
    margin-left:58%;
    margin-top:2%;
}

另一个问题是我的子菜单一直在消失，而你却在它们上面盘旋。我再次尝试使用z-index无济于事。

<div id="menu_container">

<div class="menu_item" id="item_one">
    <a class="menu_item" href="#"><h3>Downhill</h3></a>
    <div class="sub_menu_item" id="item_one_sub">
        <h4>Gallery</h4>
        <h4>Example</h4>
        <h4>Example</h4>
    </div>
</div>
</div>

菜单的CSS：

.menu_item {
  color:white;
  position:absoloute;
  height:3%;
  width:25%;
  text-decoration:none;
  text-align:center;
  margin-top:-20px;
  z-index:2;
  }

.sub_menu_item {
   background-color:black;
   display:none;
   position:absoloute;
   text-align:center;
   width:100%;
   z-index:5;
}

#menu_container {
    position:fixed;
    width:79%;
    min-width:500px;
    height:30px;
    background-color:orange;
    margin-top:10px;
    margin-left:auto;
    margin-right:auto;
}

#item_one_sub {
    height:auto;
    margin-top:-20px;
    text-align:center;
}

#item_one:hover   #item_one_sub {
    display:block;
    z-index:100;
}

非常感谢任何和所有帮助！

Answer 1

我认为以下解决方案可以解决您的两个问题。

我重新设计了布局，创建了一个用于包装标题和内容的包装器

.wrapper {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 80%;
    margin:0 auto;
    position:relative;
    overflow:hidden;
}

然后安排导航菜单（当然，如果你喜欢，你仍然可以使用你当前的解决方案！）

<div class="navitem">
    <div class="title">Item one</div>
    <div class="submenu">
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
        <div class="submenuitem">Some link</div>
    </div>
</div>

我还修复了一些关于视频包装的不精确性

.videoWrapper {
    width:100%;
    display:block;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Fiddle

导航菜单现在始终位于顶部，具有固定位置，并且位于视频iframe之上。

css Hover一直在消失并落后于iframe？

1 个答案: