Element pod jego stałą rodzica przy użyciu `Z-index` w Chrome

Question

Chcę element (div) należy warstwowy pod jego stałą rodzica (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>

to działa w Firefox, ale nie w Chrome. Aby to naprawić trzeba to zrobić:

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>

Ale to jest do bani! Kto jest w błędzie zgodnie ze specyfikacją Firefox lub Chrome? Czy istnieje lepsze podejście, aby to zrobić w różnych przeglądarkach?

Answer 1

Spróbuj tego,

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>

Wygląda Mam rozumieją swoje pytanie. W każdym razie odpowiedź brzmi "poprawne". Myślę, że lepszym rozwiązaniem jest użycie tego samego DIV na tym samym poziomie (jeśli to możliwe).

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>