Element unter seiner festen Mutter mit `z-index` in Chrome

Question

Ich mag ein Element (div) unter seiner festen Mutter geschichtet wird (header):

header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100px; 
 
    
 
    background-color: #ccc; 
 
} 
 
header > div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100px; 
 
    z-index: -1; 
 
    
 
    transform: translateY(50%); 
 
    background-color: #aaa; 
 
}

<header> 
 
    <div> 
 
    </div> 
 
</header>

Dies funktioniert in Firefox aber nicht in Chrome. Um es zu beheben müssen Sie dies tun:

header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100px; 
 
} 
 
header > div { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    background-color: #ccc; 
 
} 
 
header > div > div { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100px; 
 
    z-index: -1; 
 

 
    transform: translateY(50%); 
 
    background-color: #aaa; 
 
}

<header> 
 
    <div> 
 
    <div> 
 
    </div> 
 
    </div> 
 
</header>

Aber das saugt! Wer stimmt nicht mit der Spezifikation Firefox oder Chrome? Und gibt es einen besseren Ansatz, um dies browserübergreifend zu erledigen?

Answer 1

die Sie interessieren,

header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #ccc; 
 
    overflow: hidden; 
 
} 
 
header > div { 
 
    height: 100%; 
 
    z-index: -1; 
 
    transform: translateY(50%); 
 
    background-color: #aaa; 
 
    overflow: hidden; 
 
}

<header> 
 
    <div></div> 
 
</header>

Scheint, wie ich falsch verstehen Ihre Frage haben. Wie auch immer, die Antwort ist Chrome ist korrekt. Ich denke, die bessere Lösung dafür ist die Verwendung von zwei DIVs (wenn möglich).

header { 
 
    position: fixed; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    
 
} 
 
header .header-inner { 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100%; 
 
    z-index: 1; 
 
    background-color: #ccc; 
 
} 
 

 
header .under-layer { 
 
    position: absolute; 
 
    height: 100%; 
 
    z-index: -1; 
 
    transform: translateY(50%); 
 
    background-color: #aaa; 
 
    overflow: hidden; 
 
    top: 0px; 
 
    width: 100%; 
 
}

<header> 
 
    <div class="header-inner"></div> 
 
    <div class="under-layer"></div> 
 
</header>