Html 如何将子元素移动到其父元素上的另一个子元素之上'；谁有自己的父元素？

我有两个父元素（黑色和红色

div

s）。每个元素都包含一个子元素。黑色的有一个灰色的div，红色的有一个粉红色的div

以下限制：

• 我不能将子元素与它自己的父元素之间的关系更改，也就是说，我不能将子元素移到它自己的父元素之外
• 红色div必须保持在黑色div的下方

是否可以将粉色div移到灰色div上方

。父级黑色{
宽度：100%；
高度：50px；
背景色：rgba（0,0,0,9）；
颜色：白色
}
.child gray{
宽度：250px；
高度：90px；
背景颜色：灰色；
位置：绝对位置；
右：137px；
顶部：20px；
z指数：0；
颜色：白色；
}
.母红{
宽度：100%；
高度：40px；
背景色：红色；
位置：绝对位置；
顶部：40px；
z指数：-999；
}
.儿童粉{
宽度：95%；
高度：80px；
背景颜色：粉红色；
顶部：30px；
左：20px；
位置：绝对位置；
z指数：9999；
}

2.
2.1
1.
1.1

使用下面的jQuery

$（文档）.ready（函数（）{
$（'.child-gray'）.insertBefore（$（'.child-pink'））；
})

。父级黑色{
宽度：100%；
高度：50px；
背景色：rgba（0,0,0,9）；
颜色：白色
}
.child gray{
宽度：250px；
高度：90px；
背景颜色：灰色；
位置：绝对位置；
右：137px；
顶部：20px；
z指数：0；
颜色：白色；
}
.母红{
宽度：100%；
高度：40px；
背景色：红色；
位置：绝对位置；
顶部：40px；
z指数：-999；
}
.儿童粉{
宽度：95%；
高度：80px；
背景颜色：粉红色；
顶部：30px；
左：20px；
位置：绝对位置；
z指数：9999；
}

2.
2.1
1.
1.1

老实说，我不明白真正的问题在这里。。。我想这符合你的限制条件：

。父级黑色{
宽度：100%；
高度：50px；
背景色：rgba（0,0,0,9）；
颜色：白色；
位置：相对位置；
}
.child gray{
宽度：250px；
高度：90px；
背景颜色：灰色；
位置：绝对位置；
右：137px；
顶部：20px；
z指数：0；
颜色：白色；
}
.母红{
宽度：100%；
高度：40px；
背景色：红色；
利润上限：-20px；
}
.儿童粉{
宽度：95%；
高度：80px；
背景颜色：粉红色；
顶部：70像素；
左：20px；
位置：绝对位置；
z指数：9999；
}

1.
1.1
2.
2.1

下方是否意味着较低的z-指数或定位？如果删除父级红色上的z-指数，粉红色将位于灰色上方。@Ihazkode黑色div必须覆盖红色div，即红色div“隐藏”在黑色div下方。这就是我所说的“黑色div下方”