How can i make an element from a bottom stacking context stays in front of another higher stacking context? [duplicate]

Question

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):

this is what i want:

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

Answer 1

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

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.