3

How can i make that an element contained in a stacking context at the bottom of the stacking order appears in front of another element in a different stacking context that is higher in the 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 is what i have (this is what it's suppose to happen): enter image description here

this is what i want: enter image description here

Bare in mind that i can't change the elemnts order in HTML neither remove the z-index in Parents element

Yandy_Viera
  • 4,320
  • 4
  • 21
  • 42

1 Answers1

5

The short answer is that you can't. This image from MDN's explanation about stacking context explains it well:

enter image description here

There has been talk about escaping stacking context using position: fixed but it seems this is not happening just yet (see this fiddle and the question that generated it).

Alternate Solution:

For you, a possible alternative solution would be to nest Parent-1 inside Parent-2 and then use position: absolute to put Parent-1 wherever you want it.

Community
  • 1
  • 1
jcuenod
  • 55,835
  • 14
  • 65
  • 102