我有以下div元素:
<div id="banner1">
<div id="whiteout"></div>
<div id="banner2"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
我需要:'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; …
Run Code Online (Sandbox Code Playgroud)