Buenas,
Bueno yo con position: fixed en ie creo que tube problemas, lo solucione con esto que es un manual tutorial o ayuda o lo que sea que cree el otro dia con un metodo que se me ocurrio, pero me imagino que la gente lo sabra.
--------------------------------------------\\\\\\\
Logica corriente,
# Usar un div con el siguiente style:
Código:
<style>
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
moz-opacity:.60;
opacity:.60;
z-index: 50;
</style>
Resultado:
En la parte 1 el scroll de la pagina estaria arriba del todo, en este caso la capa transparente se veria bien,
pero en el momento que bajamos el scroll la capa sube con toda la web (por estar con top: 0px; en el momento que se usa el scroll la posicion 0 sube para arriba.
SOLUCION
Yo este problema lo soluciono de la siguiente forma,
1) Le damos el stylo a
html, body:
Código:
html, body {
margin: 0px;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
Con esto asignamos a body que mida el total de la pagina y que el contenido que este fuera de esos limites no se monstrara.
Ahora creamos una capa que sera la que contendra toda la web(incluido el scroll)
Código:
<div id="Cuerpo">
....
</div>
le adjuntamos el style:
Código:
div#Cuerpo {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: scroll;
overflow: auto;
z-index: 1;
}
Bien, ahora por ultimo toca crear la capa transparente, está capa tendra que estar fuera del "<div id='Cuerpo'>..." por ejemplo lo colocaremos antes:
Código:
<div id="Trans" class="transparente"></div>
<div id="Cuerpo">.....
Tendremos que crear el stylo asignado a la capa transparente "div.transparente":
Código:
div.transparente {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 99;
}
Bueno y con esto lo que tendriamos que conseguir seria algo asi:
CODIGO TERMINADO:
Código HTML:
<html>
<head>
<title>mTools</title>
<style>
html, body {
margin: 0px;
font-family: "Arial";
position: relative;
width: 100%;
height: 100%;
overflow: hidden
}
div#Cuerpo {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: auto;
z-index: 1
}
div.transparente {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=60);
moz-opacity:.60;
opacity:.60;
display: none;
z-index: 50
}
</style>
<script language="javascript">
function capa(e){
var e1 = document.getElementById(e).style.display;
switch(e1){
case 'block': document.getElementById(e).style.display = 'none'; break;
case 'none': document.getElementById(e).style.display = 'block'; break;
case '': document.getElementById(e).style.display = 'block'; break;
}
}
</script>
</head>
<body>
<div id="Trans" class="transparente" onclick="capa('Trans')"></div>
<div id="Cuerpo">
<a href="javascript: capa('Trans');">Abrir Capa</a>
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
1
<br />
<a href="javascript: capa('Trans');">Abrir Capa</a>
<br />
<br />
design by <b style="color: green">Dr perejil</b>
</div>
</body>
</html>
y nada con esto termino,
Un saludo y espero haber resuelto tu duda.