How to place 2 relative divs on top of each other / the top css property is different in browsers using css so that they display the same in all browsers?

Question

I have the following div elements:

<div id="banner1"> <div id="whiteout"></div> <div id="banner2"></div> </div> 

I need it: the "whiteout" element will appear directly on top of "banner1" and "banner2" and it will display the same in all browsers (currently Firefox and IE seem to display it poorly even if the "top" css property is in pixels ) - alternatively, can someone please tell me how to display 2 relative divs on top of each other?

My css currently looks like this:

 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 for any help or suggestion! :)

Peter.

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> 

OR 140px allowed

 <div id="banner1" style='position: relative'> <div id="whiteout"></div> <div id="banner2" style='margin-top: -140px'></div> </div> 

Change it to get accurate results.