z-index 问题的解决方法答案

【问题标题】：Workaround for z-index issuez-index 问题的解决方法
【发布时间】：2016-08-02 07:56:00
【问题描述】：

如何将红色 div 放在蓝色 div 之上？

这是这个问题的fiddle。

小提琴中#greendiv 内的图像在拖动时也应该超过#reddiv。

【问题讨论】：

小提琴在哪里？
问题与你的小提琴有些不同。 Z-index 不会按照你的要求去做。蓝色div 始终位于绿色div 的上方或下方，红色div 位于绿色div 内部。你不能把蓝色的div 放在绿色和红色之间。

标签： jquery html css jquery-ui jquery-ui-draggable

【解决方案1】：

▶ 如果 @ 987654329@ 本身并不是一个孩子，因为 (red 和 blue 这两个元素的 z-index 属性 在你的情况下） 是不同的高潮。

将 z-index: 9999 设置为 red，您只需确保 red 将堆叠在里面的所有内容之上green，但您不会以任何方式影响它之外的任何事物(blue)。

这是我制作的一张快速图片来说明这一点：

▶ 但是，要解决 jsfiddle 中的图像拖动问题，您可以通过以下方式使图像通过 #reddiv：

img {
  z-index: 1;
}

注意：要使上述方法起作用，#greendiv 必须具有相同或更大的 z-index > 比#reddiv，因为如上所述，无论您将孩子的z-index设置多高（图片），它永远不会堆叠得高于另一个不是其兄弟元素的元素(#reddiv)。

jsFiddle: → here.

片段：

$(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 是 @JohnDetlefs 推荐的一篇关于 z-index 的精彩文章。

【讨论】：

这方面的好文章可以在这里找到 --> philipwalton.com/articles/what-no-one-told-you-about-z-index
@JohnDetlefs 确实是一篇很棒的文章。

【解决方案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;
}

【讨论】：

【解决方案3】：

使用 z-index 比两个框都多，就像您将 z-index 设置为绿色 1，然后蓝色应该是 2，红色应该是 3。

【讨论】：