2

我有两个 div（顶部和底部），顶部 div 中的一个 div 应该与底部的一个重叠。尽管查看了此问题的常见答案，但我仍然无法使其正常工作。

#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>
4

1 回答 1

1

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

#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>
于 2013-07-09T06:10:45.333 回答