html - Z-index 不适用于 IE

Question

以下代码在 IE 11 中运行良好，但当我在 IE8 上测试页面时，Main_Box 的底部没有与 Intro DIV 的顶部重叠。

如果我从“Intro”中删除背景颜色，我可以看到它后面的 Main_Box 的底部，但我无法让它显示在前面。

我认为这可能是此页面上引用的错误...

Z-index in Internet Explorer not working

...因此尝试将其包装在绝对 DIV 中以重置 z-index，但无济于事。

    <div style="position: relative; z-index: 3000">
<section id="intro">

    <h1>
        EXAMPLES
    </h1>

    <div class="animation-container">
        <div id="object" class="animate fadeIn"></div>
    </div>

    <div id="intro-copy">
        <img src="./images/arrow.png" alt="Arrow" id="arrow" class="pulse" />
        <p>Scroll down</p>
    </div>
</section>
</div>

工作 IE11 HTML:

<section id="main">

    <div class="Main_Box">
    <h10>
        “People often represent the weakest link in the security chain”
    </h10>

    <h2>
        Contact us today to see how we can help.
    </h2>
    </div>

</section>


<section id="intro">

    <h1>
        EXAMPLES
    </h1>

    <div class="animation-container">
        <div id="object" class="animate fadeIn"></div>
    </div>

    <div id="intro-copy">
        <img src="./images/arrow.png" alt="Arrow" id="arrow" class="pulse" />
        <p>Scroll down</p>
    </div>
</section>

CSS

#main{
height: 420px;
width: 100%;
position: relative;
top: 130px;
 }

.Main_Box {
border-width: 5.547px;
border-color: rgb( 255, 255, 255 );
border-style: solid;
border-radius: 10px;
background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(27,27,27) 100%);
box-shadow: 2.5px 4.33px 5px 0px rgb( 0, 0, 0 );
position: relative;
width: 70%;
height: 270px;
margin: 0 auto;
position: relative;
z-index: 9999;
padding: 30px;
}


#intro{
height: 650px;
width: 100%;
position: absolute;
background-color: #ffffff;
}

非常感谢任何帮助。

这是我的开发站点的链接:

http://goo.gl/NlAkiU

谢谢，

Answer 1

尝试在部分级别分配 z-index； #main 和 #intro 是 sibling ，因此更有可能在同一个 stacking context 中就遗留浏览器而言。

#main { z-index: 9999; }