如何補償相對定位元件留下的空間？ （如果沒有弄得一團糟）

Question

我有這三個要素：

現在，我的佈局任務是元素.b（順便說一下，如果它是重要的，他們都是HTML <section> S）是有點疊加在元素.a上。因此我決定將position: relative應用於它，然後使用top: -50px將其微調。

什麼情況是這樣的：

我成功地疊加在兩個頂級元素，但現在我.b和.c之間產生不必要的50像素的空間。 （他們應該被粘在一起。）

我的第一個猜測是申請一個等效的margin-bottom: -50px，但這並沒有工作，由於某種原因，我也不知道。

最終，我通過使.b的.a孩子解決它在一個迂迴的方式。這導致.a溢出以上.c，但後來我申請的順序margin-bottom給它一個神奇的數字量推.c回落。

當然，我不是很滿意這個解決方案，所以我問在這裏。

會說什麼是解決這個問題的最好方法？

• 創造額外的nonsemantic標記
• 應用相同top: -50px規則應用於所有後續元素的頁面
• 上的使用：最好的，我的意思是我想避免的方式，如果可能的話

  通過我的CSS上的任何一種幻數。

我只是想學習處理這個問題時的最佳實踐，因爲我認爲這將是一個問題，我將在未來遇到更多的時間。

Answer 1

而不是設置的

top: -50px; 

只需設置

margin-top: -50px; 

這樣你.c仍然堅持.b，你不必亂用別的。

的jsfiddle這裏：http://jsfiddle.net/gyrgfqdx/

Answer 2

因此，幾種方法來實現這一目標。

我的建議是利用margin-top要溢出的元素。其他一切都將正確渲染，只有一個項目需要適當定位。

可視化表示：

HTML

<div id="one">Item 1</div> 
<div id="two">Item 2</div> 
<div id="three">Item 3</div> 

CSS

#one, #two, #three { 
    position: relative; 
    margin: 0 auto; 
} 
#one { 
    width: 400px; 
    height: 200px; 
    background: #ABC; 
} 
#two { 
    width: 200px; 
    height: 100px; 
    background: #CBA; 
    margin-top: -50px; 
} 
#three { 
    width: 400px; 
    height: 300px; 
    background: #BBB; 
} 

例此處提供：

http://jsfiddle.net/dp83o0vt/