Jquery z索引问题的解决方法

如何将红色的div置于蓝色div之上

下面是这个问题的一个例子

---

当拖动时，小提琴中

#greendiv

内的图像也应越过

#reddiv

。

只需将

z-index:-1

添加到

#reddiv

中，将

z-index:1

添加到

#greendiv

请参见此处

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

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

---

▶ 如果一个

不是一个子元素，那么就不可能将一个

放在
父元素和
子元素之间，因为这两个元素的
属性（
红色和
蓝色在您的情况下）是不同的高潮

设置
z-index:9999为
红色
，您只需确保
红色
，将堆叠在
绿色
内部的所有内容之上，但您不会以任何方式影响其外部的任何内容（
蓝色
）

下面是我制作的一张快速图像，用于说明这一点：


▶ 但是，要解决JSFIDLE中图像拖动的问题，您可以通过放置以下内容使图像到达

img {
  z-index: 1;
}

注意：要使上述方法有效，
greendiv必须具有与
\reddiv相同或更大的
z-index，因为如上所述，无论您将孩子的
z-index设置得多高（图像），它的堆栈将永远不会高于不是其同级元素的另一个元素（
#reddiv）


jsFiddle:→ .

片段：


$（函数（）{
美元（“#greendiv img”）。可拖动({
回复：“无效”
});
})；
#reddiv，
#格林迪夫{
宽度：100px；/*我把它们做成100px*/
高度：100px；/*适合片段*/
位置：相对位置；
}
#格林迪夫{
背景：绿色；
}
#雷迪夫{
背景：红色；
}
img{
z指数：1；
}

使用z-index多于两个框，就像你将z-index设置为绿色1，蓝色为2，红色为3一样。
小提琴在哪里？问题与你的小提琴有所不同。
z-index
不会按照你的要求做。蓝色
div
总是在绿色
di的上方或下方v
，红色的
div
在绿色的
div
里面。你不能把蓝色的
div
放在绿色和红色之间。在这里可以找到一篇关于这方面的好文章-->@JohnDetlefs确实是一篇很棒的文章。