z-index问题的解决方法

Question

如何将红色div放在蓝色div的顶部？

这是问题的fiddle。

当拖动时，小提琴中#greendiv内的图像也会越过#reddiv。

Answer 1

▶在 div 和 parent 之间插入 child 是不可能的如果 div 本身不是孩子，那么两个元素的 z-index 属性（ {{1}你个案中和 red ）有不同的高潮。

为 blue 设置 z-index: 9999 ，您只需确保 red ，堆积在 red 内的所有内容之上，但您不会以任何方式影响（ green ）< / em>的

以下是我制作的快速图片，说明了这一点：

▶要解决jsfiddle中图像拖动的问题，您可以通过以下方式让图片超越 blue ：

#reddiv

注意： 要使上述工作正常， img { z-index: 1; } 必须具有相同或更高 {{1} 比 #greendiv ，因为如上所述，无论你设置 <{1>} （ z-index 图片），它永远不会堆叠高于另一个不是它的兄弟（ #reddiv ）的元素。

jsFiddle：→here。

<强>段：

z-index

#reddiv

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

Here是关于 @JohnDetlefs 建议的 #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; } 的精彩文章。

Answer 2

只需将z-index:-1添加到#reddiv，将z-index:1添加到#greendiv

点击此处 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比两个框更多，就像你为绿色1设置z-index一样，然后对于蓝色它应该是2，对于红色它应该是3.