Hola a todos!
Tengo una duda a la hora de construir una estructura que necesito... Necesitaría que en la página, al hacer scroll el contenido del bloque superior se fuese ocultando con el contenido del bloque inferior pero no logro hacerlo jugando con los position y demás.
La estructura que tengo es esta (esto es de un fichero ejemplo que me he hecho de prueba para ir probándolo hasta dar con la tecla):
Código HTML:
Ver original<div class="contiene-all"> <div class="bloque-superior"> este es mi bloque superior
<div class="bloque-inferior"> este es mi bloque inferior
Código CSS:
Ver originalbody,html{width:100%;height:100%;}
.contiene-all{
width:100%;
height:auto;
min-height: 100%;
position:relative;
}
.bloque-superior{
width:100%;
height:auto;
min-height:900px;
position:absolute;
background: blue;
z-index: 99;
top:0;
}
.bloque-inferior{
width:100%;
min-height:2000px;
background:green;
position: relative;
z-index: 9999;
}
Y necesitaría que el de bloque-inferior al hacer scroll fuese ocultando el de bloque-superior.
Ah! Ninguno de los bloques tienen un height fijo sino que varía por si os orienta algo también....
Si pudieseis echarme una mano os lo agradezco porque me tiene ya.....
Gracias!