绝对元素 z-index 内的固定元素不起作用

Question

I got two absolute elements with the same z-index . One of them has a fixed-position child which has an higher z-index than the parent.

Why the child only overlaps the parent but not the other absolute element with a lower z-index . How to achieve that the child overlaps both lower z-index elements?

 .lower-element { background: green; width: 3em; height: 3em; position: absolute; z-index: 10; } .higher-element { background: blue; width: 100vw; height: 100vh; position: fixed; opacity: .5; z-index: 20; } .lower-element-1 { top: 5em; }

 <div class="lower-element"> <div class="higher-element"> </div> </div> <div class="lower-element lower-element-1"> </div>

Answer 1

position: fixed and position: absolute only usable with the​ top , bottom , left or right values.

 .lower-element { background: green; width: 3em; height: 3em; position: absolute; z-index: 10; } .higher-element { background: blue; width: 100vw; height: 100vh; position: fixed; opacity: .5; z-index: 20; top:5em; /* I added */ } .lower-element-1 { top: 5em; }

 <div class="lower-element"> <div class="higher-element"> </div> </div> <div class="lower-element lower-element-1"> </div>

Answer 2

Remove all your z-index and add only to .higher-element : z-index: -1;

 .lower-element { background: green; width: 3em; height: 3em; position: absolute; } .higher-element { background: blue; width: 100vw; height: 100vh; position: fixed; opacity: .5; z-index: -1; } .lower-element-1 { top: 5em; }

 <div class="lower-element"> <div class="higher-element"> </div> </div> <div class="lower-element lower-element-1"> </div>

Answer 3

By making .higher-element to be siblings with .lower-element , then set .higher-element with z-index: -1

 .lower-element { background: green; width: 3em; height: 3em; position: absolute; z-index: 10; } .higher-element { background: blue; width: 100vw; height: 100vh; position: fixed; opacity: .5; z-index: -1; } .lower-element-1 { top: 5em; }

 <div class="lower-element"> </div> <div class="higher-element"> </div> <div class="lower-element lower-element-1"> </div>