具有相对位置和负顶值的元素下方的元素保留在他们所在的位置

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

我不是很确定你想达到什么，但我希望我能得到这个权利。 给下面的CSS在你的第三<div>。只是检查:)

position: relative; 
    top: -50px; 

，或者

margin-top: -50px; 

另一种方式，

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

JSFiddle

Answer 2

不要用户填充为div设置高。填充用于不同的目的。

div { 
    height:50px; 

} 
#div1 { 
    background: yellow; 
} 
#div2 { 
    background: pink; 
} 
#div3 { 
    background: gray; 
} 

Answer 3

您无法通过top实现CSS规则。 top的负值不会影响下面的元素。您必须改用margin-top。

所以尝试：

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

DEMO

Answer 4

您应该使用

margin-top: -50px; 

Answer 5

只是改变顶边距会做的伎俩

Answer 6

他们不会因为跟随你正在使用绝对位置。如果你想实现你描述的行为，你需要使用块。

#div2, #div3 { 
    margin-top: -50px; 
} 

尽管我不建议您使用负边距。只用它们作为最后一个资源。

Answer 7

Check this link : 

http://jsfiddle.net/silpa/dyg86qbq/16/
上面的链接与位置相对和margin-top。 以下是第一个div的位置绝对值和第二个div的margin-top的链接。 http://jsfiddle.net/silpa/dyg86qbq/22/

Answer 8

你也可以给CSS这样

#div1 { 
    background: yellow; 
    width:100%; 
} 
#div2 { 
    background: pink; 
    position: relative; 
    **clear:both;** 
    width:100%; 
} 
#div3 { 
    background: gray; 
    width:100%; 
}