Desplazarse al índice de navegación.
La falta de soporte para posiciones fijas en CSS por parte del navegador Internet Explorer para PC ya se ha mencionado en otros documentos de este sitio. Por otra parte, algunos de los seguidores de la serie de televisión Futurama sabrán que la nave espacial que usan los protagonistas no se mueve a través del espacio, sino que mueve el espacio en torno a ella. Esta matización relativística es también utilizada en chistes de dudoso gusto sobre abanicos y bombillas, pero también para tratar de solucionar la papeleta en el citado navegador.
Ya hemos visto en otros documentos que se puede imitar el posicionamiento fijo mediante un script, pero en esta ocasión veremos cómo hacerlo simplemente con CSS. Para ello, identificamos como "Fija" la caja o elemento cuya posición queremos fijar, y agrupamos el resto del contenido en un elemento div identificado como "Todo". La idea es posicionar ambos de forma absoluta, y darle al segundo elemento las mismas propiedades que tendría el elemento body. Por ejemplo:
body {
overflow:auto;
}
#Todo {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
#Fija {
position:absolute;
top:0;
left:0;
}
Dado que este apaño lo hemos puesto en marcha para un navegador en concreto, no esta de más respetar a los demás y servirles el código más coherente. Para ello haremos uso de selectores del nivel 2, que tampoco son soportados por el navegador de microsoft (amén de otro pequeño ajuste, aprovechando un error de interpretación del mismo):
* html body {
overflow:auto;
}
#Fija {
position:absolute;
top:0;
left:0;
}
html>body #Fija {
position:fixed;
}
#Todo {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:auto;
}
html>body #Todo {
position:static;
top:auto;
left:auto;
width:auto;
height:auto;
overflow:visible;
}
Para terminar, un ejemplo del método, nave espacial incluída.
15/05/2003. sysifus. Recorte nº 12.
Estás en: tierra de nómadas > recortes > "position:fixed;" en Internet Explorer.