css - 如何将 2 个相对 div 相互定位/顶部 css 属性在浏览器中有所不同，使用 css 以便它们在所有浏览器中显示相同？

Question

我有以下 div 元素:

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

我需要:'whiteout' 元素直接出现在 'banner1' 和 'banner2' 的顶部并让它在所有浏览器中显示相同(目前 Firefox 和 IE 似乎很难正确显示它，即使'top' 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>

调整它以获得准确的结果