弹窗 div 在 IE11 中隐藏在 iframe 下

Question

我有一个 div 默认情况下隐藏了一些文本。当你点击按钮时，它会出现，但在 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;
}

Answer 1

试试这个

.product-youtube iframe {
    position:relative;
    z-index: 1;
}

Answer 2

我通过将 wmode=opaque; 添加到 iframe 解决了我的问题。

弹窗 div 在 IE11 中隐藏在 iframe 下

pop-up div is hidden under iframe in IE11

html

css

internet-explorer

iframe

z-index