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

Question

I have layout with two fixed positioned div's(Class A and Class B). Also i have a absolute positioned div(Class C) inside class B with z-index greater than class A. In chrome class C doesn't overlap class A. It is working fine in 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

Note: Adding z-index to class B might solve the problem, but in my case i cannot do that. Is there any other way to fix it?

Answer 1

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