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