[英]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?
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似乎很难正确地显示它,即使'顶部' '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. 彼得。
<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 调整它以获得准确的结果
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.