具有相對位置和負頂值的元素下方的元素保留在他們所在的位置

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%; 
}