觀察到偶然發現的結果，同時在另一個頂層上分層div，而不使用Z-index

Question

我有兩個div（100px乘100px）疊加在另一個的頂部，其中底部div在頂部具有黑色邊框：看fiddle

<div id="top"></div> 
<div id="bottom"></div>​ 

div { 
    width: 100px; 
    height: 100px; 
} 

#top { 
    background: tomato; 
} 

#bottom { 
    border-top: 1px solid black; background: gold; 
} 

我想用頂部div來遮掩下一個邊界。 （在這種情況下，我無法刪除邊框）。

通常情況下，我會通過設置在兩個div的position: relative和z-index做到這一點，（確保DIV＃一個具有更高的z-index比DIV＃兩個），然後加入margin-bottom: -1px到DIV＃一個，看到fiddle - 這樣的CSS變成：

div { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 

#top { 
    z-index: 9999; 
    margin-bottom: -1px; 
    background: tomato; 
}  

#bottom { 
    z-index: 1; 
    border-top: 1px solid black; 
    background: gold; 
} 

但我瞎搞較早，並注意到，如果我浮頂格（同時保持負下邊距），並清除下一個（讓他們留下來堆疊垂直ly），那麼我不需要使用position: relative或z-index來隱藏邊界，只要我將負的底部邊距添加到頂部的div（而不是底部的負頂部邊距） - 請參閱fiddle

div { 
    width: 100px; 
    height: 100px; 
} 

#top { 
    float: left; 
    margin-bottom: -1px; 
    background: tomato; 
}  

#bottom { 
    clear: both; 
    border-top: 1px solid black; 
    background: gold; 
} 

這工作得很好，我喜歡它，因爲有更少的代碼編寫。那麼這裏發生了什麼？這是一種有效的，跨瀏覽器的方式，將一個事物層疊到另一個事物上，還是最好堅持使用z-index的第一種方法，就像我一直所做的那樣？

Answer 1

這是一個跨瀏覽器問題。最好堅持我認爲的第一種方法。