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): enter image description here

this want: enter image description here

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:

enter image description here

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

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -