How Can I Make An Element From A Bottom Stacking Context Stays In Front Of Another Higher Stacking Context?

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 highe

Solution 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 Answer :

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.