html - 绝对元素不与固定位置div重叠

Question

我的布局有两个固定位置的 div(A 类和 B 类)。此外，我在 B 类中有一个绝对定位的 div(C 类)，其 z-index 大于 A 类。在 chrome 中，C 类不与 A 类重叠。它在 Firefox 中工作正常。

HTML

<div class="A"></div>
<div class="B">
    <div class="C"></div>
</div>

CSS

.A{position:fixed; width:200px; height:50px; z-index:1; background-color:#FCC}
.B{ position:fixed}
.C{position:absolute; z-index:2; top:-10px; background-color:#CC6; width:70px; height:50px;}

Jsfiddle

注意:将 z-index 添加到 B 类可能会解决问题，但在我的情况下我不能这样做。有没有其他方法可以解决？

Answer 1

在.A上设置z-index:0，它会移到顶部