Workaround for z-index issue

Question

How to bring the red div on top of the blue div?

Here's a fiddle of this problem.

The images inside the #greendiv in the fiddle should also come over the #reddiv when dragged.

Answer 1

▶ It's impossible to put a div in between a parent and a child if that div is not a child itself, because the z-index properties of the two elements ( red and blue in your case) are of different climax.

Setting z-index: 9999 for red , you just make sure that red , will be stacked on top of everything inside green , but you don't influence in any way anything outside of it ( blue ) .

Here's a quick image I made illustrating this point:

---

▶ To solve the problem with the image-dragging in your jsfiddle, however, you can make your images come over #reddiv by putting:

img {
  z-index: 1;
}

Beware: For the above to work, #greendiv must have the same or greater z-index than #reddiv , because as said above, no matter how high you set the z-index of the child (images) , it will never stack higher than another element which is not its sibling ( #reddiv ) .

---

jsFiddle: → here .

Snippet:

 $(function() { $("#greendiv img").draggable({ revert: "invalid" }); }); 

 #reddiv, #greendiv { width: 100px; /* I made them 100px to */ height: 100px; /* fit in the snippet */ position: relative; } #greendiv { background: green; } #reddiv { background: red; } img { z-index: 1; } 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> <div id="greendiv"> <img src="http://dummyimage.com/30x40" /> <img src="http://dummyimage.com/30x40" /> </div> <div id="reddiv"></div> 

---

Here is a great article about z-index suggested by @JohnDetlefs .

Answer 2

just add z-index:-1 to the #reddiv and z-index:1 to the #greendiv

see here jsfiddle

#greendiv {
  background: green;
  width: 200px;
  height: 200px;
  position: relative;
  z-index:1;
}

#reddiv {
  background: red;
  width: 200px;
  height: 200px;
  position: relative;
  z-index:-1;
}

Answer 3

最好将z-index应用于两个框，就像将z-index设置为绿色1一样，然后将蓝色设置为2，将红色设置为3。