弹出式div在IE11中隐藏在iframe下

时间:2015-01-29 17:48:54

标签: html css internet-explorer iframe z-index

我有一个div,默认隐藏了一些文字。当你点击按钮,它会apear,但在IE11(我得到),部分div被youtube iframe覆盖,我不知道,如何修复它:( 以下是问题的图像:
image of problem

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;
}

2 个答案:

答案 0 :(得分:2)

试试这个

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

答案 1 :(得分:0)

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