如何将2个相对div放在彼此/ top css属性上不同的浏览器,css所以它们在所有浏览器中显示相同?

前端之家收集整理的这篇文章主要介绍了如何将2个相对div放在彼此/ top css属性上不同的浏览器,css所以它们在所有浏览器中显示相同?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下div元素:
<div id="banner1">   
    <div id="whiteout"></div>
    <div id="banner2"></div>    
</div>

我需要:’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;   
}

真诚地感谢您的任何帮助或建议!

猜你在找的CSS相关文章