如何将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>

调整它以获得准确的结果