Html 如何将 2 个相对 div 相互定位/顶部 css 属性因浏览器而异，使用 css 使它们在所有浏览器中显示相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5581235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position 2 relative divs over each other/top css property differs across browsers, with css so they appear the same in all browsers?
提问by Piotr
I have the following div elements:
我有以下 div 元素：
<div id="banner1">
<div id="whiteout"></div>
<div id="banner2"></div>
</div>
I need either: the 'whiteout' element to appear directly on top of 'banner1' and 'banner2'and having it display the same in all browsers (currently Firefox and IE seem to have a hard time displaying it properly even though the 'top' css property is in pixels) - alternatively, could someone please tell me how to display 2 relative divs over each other?
我需要： 'whiteout' 元素直接出现在 'banner1' 和 'banner2' 之上，并让它在所有浏览器中显示相同（目前 Firefox 和 IE 似乎很难正确显示它，即使 'top ' css 属性以像素为单位）-或者，有人可以告诉我如何相互显示 2 个相对 div 吗？
Currently, my css is as follows:
目前，我的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;
}
Thanks sincerely for any help or suggestion! :)
真诚感谢您的任何帮助或建议！:)
Piotr.
彼得。
回答by Itay Moav -Malimovka
<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>
OR assumiong the height of 140px
或假设高度为 140px
<div id="banner1" style='position: relative'>
<div id="whiteout"></div>
<div id="banner2" style='margin-top: -140px'></div>
</div>
Tweak it to get exact results
调整它以获得准确的结果
