Question

我有两个div（顶部和底部），顶部div中的div应与底部div重叠。尽管看common answers这个问题，我仍然无法让它发挥作用。

#above {
    position:relative;
    height: 60px;
    z-index: 1;
    background: #000;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.8)), color-stop(90%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 90%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 90%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 90%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.8) 90%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#000000',GradientType=0 );
}

#under {
    position:relative;
    background-color: blue;
    height: 60px;
}

#tab {
    background-color: yellow;
    height: 120px; width: 50%;
}

<div id="above">
 <div id="tab">Without filter</div>
</div>
<div id="under">Under</div>

Answer 1

问题是“过滤器”部分，它通常为渐变添加，即提供兼容性 - 就像在Ultimate CSS Gradient Generator中一样。删除它，一切正常。这是Fiddle，显示了两个，但下面是有效的。

#above {
    position:relative;
    background-color: #000;
    height: 60px;
    z-index: 1;
}

#under {
    position:relative;
    background-color: blue;
    height: 60px;
}

#tab {
    background-color: yellow;
    height: 120px; width: 50%;
}

<div class="page">
    <div id="above">
        <div id="tab">
            Without filter
        </div>
    </div>
    <div id="under">
    </div>
</div>

为什么即使所有元素都定位，z-index也不能在ie8中工作

1 个答案: