Element under its fixed parent using `z-index` in Chrome
Try this,
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>Seems like I have misunderstand your question. Anyway the answer is chrome is correct. I think the better solution for do this is, using same level two DIVs(If possible).
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>
When an element has position: a new context is created, which means that the div is relative to the window context. So your div can not be z-indexly placed regarding to the header.
You will have to use a workaround for this.
If you need to "position fix" your header, you can wrap it in a div :
<div class="test"><header> <div> </div></header></div>Apply position: fixed; to this div instead. This will create a stacking context for the div.
.test { position: fixed; width: 100%; height: 100px;}You can then apply z-index: -1; to header > div as it will share the stacking context of div.test with its parent (header).
header { width: 100%; height: 100%; background-color: #ccc;}header > div { position: absolute; height: 100%; width: 100px; z-index: -1; transform: translateY(50%); background-color: #aaa;}.test { position: fixed; width: 100%; height: 100px;}header { width: 100%; height: 100%; background-color: #ccc;}header>div { position: absolute; height: 100%; width: 100px; z-index: -1; transform: translateY(50%); background-color: #aaa;}<div class="test"> <header> <div> </div> </header></div>