html - 定位DIVS

Question

我正在考虑让 3 个 div 一个在另一个之上，它们之间有一个小间隙。

<div style="position:absolute; border:2px solid #000; top:40px;  width:300px; height:100px"></div>

<div style="position:absolute; border:2px solid #000; top:150px; width:300px; height:300px"></div>

<div style="position:absolute; border:2px solid #000; top:460px; width:300px; height:100px"></div>

这可行并且看起来不错，但是如果顶部或中间 div 的大小增加，那么它们可能会与其他 div 重叠。

无论如何设置它，所以 div 2 总是离 div 1 10px，而 div 3 总是离 div 2 10px？

谢谢

Answer 1

在给定的三个 div 之间添加两个 div，就像这样。

<div style="position:relative; border:2px solid #000;  width:300px; height:100px"></div>
<div style="position:relative; padding-top: 10px;"></div>
<div style="position:relative; border:2px solid #000; width:300px; height:300px;"></div>
<div style="position:relative; padding-top: 10px;"></div>
<div style="position:relative; border:2px solid #000; width:300px; height:100px"></div>

演示