如何將2個相對div放在彼此/ top css屬性上不同的瀏覽器，css所以它們在所有瀏覽器中顯示相同？

Question

我有以下div元素：

<div id="banner1">   
    <div id="whiteout"></div>
    <div id="banner2"></div>    
</div>

我需要：'whiteout'元素直接出現在'banner1'和'banner2'之上，並且它在所有瀏覽器中顯示相同（目前Firefox和IE似乎很難正確地顯示它，即使'頂部' 'css屬性是以像素為單位） - 或者，有人可以告訴我如何在彼此之間顯示2個相對div嗎？

目前，我的css如下：

div#banner1 {    
    width: 100%;
    height: 140px;
    background-image: url( "images/banner/1.png" );
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#banner2 {   
    width: 100%;
    height: 140px;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-collapse: collapse;    
}

div#whiteout {    
    border: 1px solid black;
    width: 500px;
    height: 140px;
    background-image: url( "images/whiteout.png" );
    background-position: left center;
    background-repeat: no-repeat;
    border-collapse: collapse;
    position: absolute;
    z-index: 1;
    display: block;
    top: 50px;   
}

真誠地感謝您的任何幫助或建議！ :)

彼得。

Answer 1

<div id="banner1" style='position: relative'>   
    <div id="whiteout" style='position: absolute; top:0;left:0'></div>
    <div id="banner2" style='position: absolute; top:0;left:0'></div>    
</div>

或者說140px的高度

<div id="banner1" style='position: relative'>   
    <div id="whiteout"></div>
    <div id="banner2" style='margin-top: -140px'></div>    
</div>

調整它以獲得准確的結果