How can I get a child of an element with lower z-index on front of a child of another element with higher z-index?

Question

I have the following setup:

      
Whatever



      <         


        
      

Answer 1

In short: you can't. It's not possible to have a child of a parent element with a z-index lower than a sibling, and give that child a higher z-index value than the parent's sibling, as the inherited z-index is relative to the parent (see this question for someone coming up against the same thing).

However, depending on your setup, you can remove the z-indices completely, and let the browser place your top div above the one below. You could then play around with giving just the children a z-index value.