Html CSS位置-部分重叠div

我有基本的CSS布局问题。DIV2上升150px，部分重叠DIV1。我把DIV3放在DIV2下面有问题。我可以使用与DIV2到DIV3中相同的CSS来实现，但这不是我想要的，因为它们下面还有许多其他div，而且我似乎必须对所有其他div也这样做。一定有什么东西可以重置位置。我希望我能解释清楚。DIV2的高度也必须灵活（可移动）

可视图形：

CSS第2部分：

position: relative;
top: -150px;

HTML:

---

将此项添加到您的

div2

，尽管这不是最佳做法：

页边距底部：-150px

.div1，
.第2分部，
.第3分部{
高度：150像素；
}
.1分部{
背景：红色；
}
.第2分部{
背景：蓝色；
位置：相对位置；
顶部：-75px；
边缘底部：-75px；
}
.第3分部{
背景：绿色；
}

---

将此项添加到您的

div2

，尽管这不是最佳做法：

页边距底部：-150px

.div1，
.第2分部，
.第3分部{
高度：150像素；
}
.1分部{
背景：红色；
}
.第2分部{
背景：蓝色；
位置：相对位置；
顶部：-75px；
边缘底部：-75px；
}
.第3分部{
背景：绿色；
}

---

在CSS中使用

页边距顶部

而不是

顶部

属性。而

div2

下面的其余div将自动跟随

如果仍然不起作用，请分享你的代码

div{
宽度：300px；
高度：150像素；
}
.1分部{
背景：红色；
}
.第3分部{
背景：绿色；
}
.第2分部{
保证金：0自动；
利润上限：-50px；
背景：黄色；
宽度：150px；
}
.家长{
宽度：300px；
保证金：0自动；
}

---

在CSS中使用

页边距顶部

而不是

顶部

属性。而

div2

下面的其余div将自动跟随

如果仍然不起作用，请分享你的代码

div{
宽度：300px；
高度：150像素；
}
.1分部{
背景：红色；
}
.第3分部{
背景：绿色；
}
.第2分部{
保证金：0自动；
利润上限：-50px；
背景：黄色；
宽度：150px；
}
.家长{
宽度：300px；
保证金：0自动；
}

最佳做法是什么？我在回答中添加了一个例子，表明负边距有效。我想我会尝试将

div2

放在

div1

中，并将其绝对放在那里。最佳做法是什么？我在回答中添加了一个例子，表明负边距有效。我认为我会试着把

div2

放在

div1

里面，并把它放在绝对正确的位置，你的第二个

div2

类不应该是

div3

？您已经在共享HTML代码中声明了两次

div2

类。您的第二个

div2

类不应该是

div3

？您已经在共享HTML代码中声明了两次

div2

类。

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>