phần tử thuộc cha mẹ cố định của nó sử dụng `z-index` trong Chrome

Question

Tôi muốn một yếu tố (div) để được layered dưới mẹ cố định của nó (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>

này hoạt động trong Firefox nhưng không có trong Chrome. Để khắc phục nó, bạn cần phải làm điều này:

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>

Nhưng điều này sucks! Ai sai theo đặc điểm kỹ thuật của Firefox hoặc Chrome? Và có cách tiếp cận tốt hơn để thực hiện điều này trên các trình duyệt không?

Answer 1

Hãy thử điều này,

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>

Có vẻ như tôi đã hiểu lầm câu hỏi của bạn. Dù sao câu trả lời là chrome là chính xác. Tôi nghĩ rằng giải pháp tốt hơn để làm điều này là, sử dụng cùng một mức độ hai DIV (Nếu có thể).

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>