Posicionamiento fijo
Si la posición de un elemento es fija, su ubicación en la página no se calcula con respecto a los elementos primarios o secundarios, sino con respecto a la ventana del explorador. Los elementos con posición fija fluyen dentro de las dimensiones dadas de la ventana del explorador, en lugar de fluir dentro de la ubicación del cuerpo de una página (como ocurre con el posicionamiento absoluto).
Establecer el posicionamiento fijo
En el siguiente ejemplo se incluye un diseño típico que representa atributos fijos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html><head><title>Fixed Positioning Example</title><style type="text/css">
body{height=640px; width=480px;}
#logoBar {position: fixed; width: 99.15%; height: 15%; top:0; right: 0; bottom: auto; left: 0; border :solid;}
#leftSide {position: fixed; width: 10em; height: auto; top:15%; right: auto; bottom: 50px; left: 0; border :solid;}
#main {position: fixed; width: auto; height: auto; top:15%; right: 0; bottom: 50px; left: 10em; border :solid;}
#footer {position: fixed; width: 99.15%; height: 50px; top: auto; right:0; bottom: 0; left: 0; border :solid;}
</style></head>
<body>
<div id="logoBar">...logobar...</div>
<div id="leftSide">...leftside...</div>
<div id="main">...main...</div>
<div id="footer">...footer...</div>
</body></html>
En este ejemplo, los contenedores fijos están fuera del flujo del contenido de la página. Su posición sigue siendo relativa a la ventana del explorador, incluso cuando se ajusta el tamaño de esta. Un vez definidos, no se mueven de sus ubicaciones asignadas, lo que significa que pueden bloquear, o ocultar, elementos posicionados debajo de estos. Esto hace que sea necesario tener en cuenta en el diseño de la página la colocación de los elementos de posición fija y la realización de pruebas del explorador.
Vea también
Conceptos
Acerca del posicionamiento de los elementos
¿Qué es el posicionamiento?
Posicionamiento absoluto
Aspectos relacionados con el posicionamiento
Copyright © 2011 de Microsoft Corporation. Reservados todos los derechos.