Cómo colocar 2 divisores de datos relativos entre sí/la propiedad de css superior difiere entre los navegadores, con CSS para que aparezcan igual en todos los navegadores.

Question

tengo los siguientes elementos div:

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

necesito ya sea: el elemento 'Whiteout' a aparecer directamente en la parte superior de 'banner1' y 'banner2'and tener que mostrar la misma en todos los navegadores (Firefox actualmente y IE parece tener dificultades para mostrarlo correctamente aunque la propiedad css 'superior' esté en píxeles) - alternativamente, ¿podría alguien decirme cómo mostrar 2 divisores relativos uno sobre el otro?

Actualmente, mi css es la siguiente:

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; 
} 

Gracias sinceramente por cualquier ayuda o sugerencia! :)

Piotr.

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> 

O assumiong la altura de 140px

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

modificarlo para obtener resultados exactos