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

Without changing the locations, z-index, or rearranging any of the elements, the only way I can think of that would allow the div underneath to appear would be to either change the visibility, display or opacity of the div overlapping the one you want to see.

That is, use one of the following CSS styles on the parent div of "Whatever":

visibility: hidden;
display: none;
opacity: 0;

You're basically asking to display an element above another element that has a higher z-index, which defeats the purpose of having a z-index. If you're trying to control how elements overlap, it really should be done with z-index. I would suggest you rethink how your elements are organized (maybe move the "Haaaleluia" div outside of its parent and assign it its own z-index). Otherwise, I might suggest you consider creating a duplicate of "Haaaleluia" to display above "Whatever", which may or may not suit your situation.

Edit: Looking at the image you've provided, changing the parent of the order box to the parent of the tutorial div may work for you. Here is a demo using jQuery that may help illustrate the point - just change the hover event to whatever it is that starts the tutorial. Another option may be to clone the order box to lay on top of the one below, but with a higher z-index (so that the user only sees one, but the clone overlaps everything else). This is assuming that your map div is positioned either absolutely or relatively. Hope that helps.