html - 具有相对位置且顶部值为负的元素下方的元素保持在原处

Question

我有 3 个元素，一个在另一个之上。如果我给第二个(粉红色)一个相对位置和负的最高值，它会高于第一个。但是第三个没有“跟随”，而是保持原样:

HTML:

<div id='div1'>text</div>
<div id='div2'>text</div>
<div id='div3'>text</div>

CSS:

div {
    padding: 50px;
}
#div1 {
    background: yellow;
}
#div2 {
    background: pink;
    position: relative;
    top: -50px;
}
#div3 {
    background: gray;
}

Fiddle

如何让第三个和它下面的任何其他元素“跟随”粉红色元素？

Answer 1

top CSS 规则无法实现您想要的效果。 top 的负值不影响 below 元素。您必须改用 margin-top 。

所以尝试:

#div2 {
    background: pink;
    position: relative;
    margin-top: -70px; /*Here change the top to margin-top*/
}

DEMO