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

调整它以获得准确的结果