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?

Question

I have the following div elements:

<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?

Currently, my css is as follows:

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.

Solution

<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

<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