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

Question

I have the following setup:

<div style="z-index: 10"> <div>Whatever</div> </div> <div style="z-index: 9"> <div><div>Haaaleluia</div></div> </div> 

Of course ... I simplified the setup, but this is the main idea. The "any" div overlaps the "Haaaaleluia" div. Of course, because the first parent has a larger z-index of “anything,” but “haaaleluia” does not.

Without changing the settings (and clarity, which includes maintaining the z-indices of the parents), how can I get Haaaaleluia to be at the top?

For those who asked to print here, he also ... also thank you for your help:

The big bad map is the second div.

The tutorial is the first div.

The panel with the order is a child on the map. I need him upstairs. If I set the entire map on top, the tutorial is no longer visible. If I save the card behind the order panel, it is no longer visible.

Answer 1

In short: you cannot. It is not possible to have a child of a parent with a z-index lower than that of the sister and give this child a higher z-index than the parent brother, since the inherited z-index refers to the parent (see this question for someone who goes against the same thing).

However, depending on your installation, you can completely remove z-indexes and let the browser place the top div above the one below. Then you can play around giving the children only z-index values.

Answer 2

Without changing the locations of the z-index or reordering any of the elements, the only way I can think of what will appear below the div is to either change the visibility , display , or opacity from the div that overlaps the one you want to see.

That is, use one of the following CSS styles in the parent div word Independent:

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

Basically you are asking for an element to be displayed over another element with a higher z-index value that wins the z-index destination. If you are trying to control how the elements overlap, this really should be done using z-index . I would suggest you rethink how your elements are organized (maybe move the "Haaaleluia" div outside your parent and assign it to your own z-index ). Otherwise, I could suggest you create a duplicate of “Haaaleluia” to display “Whatever happens” above, which may or may not suit your situation.

Edit:. By looking at the image you have provided, you can change the parent of the order window to the parent element of the tutorial div. Below is a demo using jQuery that can help illustrate the point - just change the hover event to what starts with the tutorial. Another option would be to clone the order block so that it lies on top of one below, but with a higher z-index (so that the user sees only one, but the clone overlaps everything else). This assumes your map div is either absolute or relative. Hope this helps.

Answer 3

Nice design.

Well, that’s why I will first say that, in my opinion, the solution to your bundle problem, as others have already pointed out, moves this field outside the parent (card).

But you set some limits, so I will try to break as little as possible. I do not know how to do this without violating any restrictions. Z-index is inherited (again, others pointed it out), so you cannot break out of your parents' layer only with this tool.

So, here you can get the same effect using javascript. This is ugly and may cause you more headaches later, but this should at least work:

• Find the absolute position of the div that you want to place on top.
• Make a copy.
• Hide the original (optional if it is opaque).
• Paste a copy on top of everything.

If you use jQuery, you can get the position of the element relative to the document using the .offset() function. After that, it's pretty simple:

 $(document).ready( function() { $("a[href='#overlay']").click( function() { // 1: get the position pos = $('.wrap').offset(); // 2: make a copy halecopy = $('.bottom .wrap').clone(); // 3: hide the original $('.bottom .wrap').css({opacity: 0}); // 4: Insert new label on top of everything $('body').prepend(halecopy); // position the new label correctly halecopy.css({position:'absolute', top: pos.top, left: pos.left, 'z-index': 2}); // show the "top" layer $('.top').fadeIn(); }); $("a[href='#hide']").click( function() { $('.top').fadeOut( function() { // remove the label copy halecopy.remove(); // show the original again $('.bottom .wrap').css({opacity: 1}); }); }); });​ 

This script works for me on this markup:

 <div class="top"> <div class="label"> <p>Whatever</p> </div> </div> <div class="bottom"> <div class="wrap"> <div class="label"> <p>Haaaleluuuuia!</p> </div> </div> </div> <a href="#overlay">show</a> <a href="#hide">hide</a>​ 

With these styles:

 .top, .bottom { position: absolute; top: 10%; left: 3%; } .top { z-index: 1; padding: 2%; background: rgba(0, 127, 127, 0.8); display:none; } .bottom { z-index: -1; padding: 3%; background: rgba(127, 127, 0, 0.8); } .label { color: #fff; } .wrap { outline: 1px dashed rgba(127, 0, 0, 0.8); background: rgba(127, 127, 127, 0.8); } .bottom .label { z-index: 10; }​ 

And here is a manual jsfiddle demonstration .

Answer 4

Added color to the div to demonstrate layering:

 <div style="position:absolute;background:blue;z-index: 10"> <div>Whatever</div> </div> <div style="position:absolute;background:red;z-index: 11"> <div><div>Haaaleluia</div></div> </div> 

Answer 5

This is just an idea that can work.

• Get a div with z-index = 9 using jquery.
• Then select the 1st child of the 1st child from the div whose z-index is 9.
• Then apply the style as follows:

$(element which you got).attr("style", "position: absolute; z-index: 12;")

The style will be applied to the small element and it will be visible in the red box.