html - How can i make an element from a bottom stacking context stays in front of another higher stacking context? -
this question has answer here:
how can make element contained in stacking context @ bottom of stacking order appears in front of element in different stacking context higher in stacking order ?
e.g:
html:
<div class="parent-1"></div> <div class="parent-2"> <div class="pepe"></div> <div class="pepin"></div> </div> css:
.parent-1{ position: absolute; z-index: 10; background-color: green; } .parent-2 { position: absolute; z-index: 5; background-color: red; } .pepe, .pepin{ background-color: blue; } .pepin{ position: fixed; z-index: 100; } this have (this it's suppose happen): 
this want: 
bare in mind can't change elemnts order in html neither remove z-index in parents element
the short answer can't. image mdn's explanation stacking context explains well:

there has been talk escaping stacking context using position: fixed seems not happening yet (see fiddle , question generated it).
alternate solution:
for you, possible alternative solution nest parent-1 inside parent-2 , use position: absolute put parent-1 wherever want it.
Comments
Post a Comment