我有一个div,默认隐藏了一些文字。当你点击按钮,它会apear,但在IE11(我得到),部分div被youtube iframe覆盖,我不知道,如何修复它:(
以下是问题的图像:
HTML
<div class="product-spec-wrapper" style="z-index:999;">
<div class="product-spec-button">
<p>Specifikace produktu</p>
</div>
<div class="product-spec-holder" style="position:absolute; z-index:1001;">
<div class="additional-information-inner">
<div class="onajwrap">
<div class="product-spec-content">
//some content here
</div>
</div>
</div>
</div>
</div>
<div class="entry-content">
<div class="clicker"></div>
<div class='product-youtube'>
<h2>Video</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/xF9yc5QtNzc?feature=oembed" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
.product-page .product-spec-wrapper {
width: 314px;
height: 50px;
position: relative;
z-index: 999;
padding-bottom: 18px;
border-bottom: 1px solid #d9d9d9;
padding-top: 20px;
}
.product-page .product-spec-wrapper .product-spec-holder {
position: absolute;
padding: 20px;
right: 0px;
top: 69px;
display: none;
}
.product-page .product-spec-wrapper .product-spec-holder .additional-information-inner {
position: relative;
background: none #f5fee7;
}
.product-spec-wrapper .additional-information-inner .onajwrap {
width: 920px;
height: 350px;
overflow-y: auto;
padding-left: 2px;
padding-right: 18px;
}
.clicker {
display: none;
position: fixed;
z-index: 998;
width: 5000em;
height: 5000em;
background-image: url("images/transparentspot.png");
left: 0px;
top: 0px;
}
.clicker.active {
display: block;
}
.product-page .entry-content {
float: left;
width: 613px;
}
.product-youtube {
width: 613px;
margin: 20px 0 20px 0;
}
.product-youtube iframe {
position:relative;
}
答案 0 :(得分:2)
试试这个
.product-youtube iframe {
position:relative;
z-index: 1;
}
答案 1 :(得分:0)
我通过将wmode=opaque;
添加到iframe解决了我的问题。