[SOLUCIONADO] Problemas de Superpocision de DIV

[JuJoGuAl]

Buenas amigos tengo un problema, estoy tratando de crear una capa que me bloquee toda la pantalla para una aplicacion en las propiedades css use esto:

Código CSS:

.pantalla{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    height: 100%;
    background: url(../imagenes/transparent.png);
}
 

y en la pagina me muestra el resultado bien (aparece un cuadro verde superpuesto) pero si bajo puedo ver el resto de la pagina (es como si la propiedad height no estuviera abarcando todo) como puedo solucionar esto?

dejo dicho que en mi sitio trabajo con paginas anidadas (con includes en php).

[pzin]

Cuando posicionas un elemento de forma absoluta y no hay ningún elemento de contención —léase cualquier elemento ancestral con una posición diferente a estática— ese elemento será el elemento raíz. Y aunque pueda parecer que ese elemento es html, no lo es. Es viewport. Y el tamaño de viewport es algo así como el "espacio visible del navegador".

Entonces estás definiendo que la altura cubra el total de ese viewport, que, obviamente, termina cuando se acaba ese espacio visible.

Sólo tendrías que colocarle a html, ya que este crece según el contenido —tiene height: auto por defecto— una posición relativa y funcionará como esperas ya que entonces la posición absoluta hará referencia no al elemento raíz sino al elemento html.

Código CSS:

html {
  position: relative;
}
 

También podrías ponérselo a body, pero para el caso, lo mismo da.

[JuJoGuAl]

Pues ciertamente es verdad ningun elemento anterior a esa capa tiene posicion relative, y probando tu ejemplo funciona solo que la capa queda un poco por debajo del html (habria que colocarle un TOP con valor negativo para que quede justo donde comienza el html) pero bien otra cosa que encontre y me funciono fue hacer:

Código CSS:

position:fixed;
 

ahora pregunto la capa anterior (que tiene el contenido) tiene una extensa información y obliga que aparezcan las scroll bar como hago para que esta nueva capa (la que e superpuesto) elimine dichos scrolls?

porque probando con:

Código CSS:

overflow: hidden!important;
 

no mola... :(

[pzin]

Tendrías que usar JavaScript. Así pensándolo por encima con CSS sería posible según el caso específico y usando :target.

[JuJoGuAl]

Lo hice con php y java, con el php cree una variable que tome el valor de 1 al cumplirse una condicion... y si esta variiable tenia el valor de 1 aplicaba el style overflow=hidden

Código PHP:

if ($tarde==1){
echo'
<script type="text/javascript">
    document.getElementsByTagName("html")[0].style.overflow = "hidden";
    document.getElementById("fondopantalla").style.display = "block";
    document.getElementById("pantalla").style.display = "block";
</script>
';
}
?>