Unidad 7. Maquetación web (VII)

7.8. Posicionamiento fijo

El posicionamiento fijo (position: fixed;) se define igual que el posicionamiento absoluto, con las propiedades top, bottom, left y right. Pero su comportamiento es distinto: el posicionamiento fijo se refiere siempre a la ventana del navegador, independientemente de que el elemento posicionado esté dentro de otro elemento con posicionamiento, como pasaba con el absoluto. Además, el elemento siempre se muestra en la misma posición, aunque la página sea larga y nos desplacemos hacia abajo o hacia un lado.

En el siguiente ejemplo, tenemos dos cajas con posicionamiento fijo. La de la izquierda está al principio de la página. La de la derecha, está al final, dentro de elementos con posicionamiento. Observa que esto no le afecta.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta content="text/html; charset=ISO-8859-1"
     http-equiv="content-type" />
   <title>Posicionamiento fijo</title>
   <style type="text/css">
    div#fijo_izquierda {
   		position: fixed;
   		left: 10%;
   		top: 50px;
   		width: 100px;
   		height: 100px;
   		border: #663366 5px double;
  		}
    div#fijo_derecha {
   		position: fixed;
  		right: 10%;
   		top: 50px;
   		width: 100px;
   		height: 100px;
   		border: #663366 5px double;
   		}
    div#columna {
   		width: 50%;
   		margin: auto;
   		}
    .verde, .azul {
   		height: 500px;
   		border: #006666 5px dashed;
   		border-width: 0 5px 5px 5px;
   		position: relative;
   		}
    .verde {
   		background-color: #66CC99;
   		}
    .azul {
   		background-color:#6699FF;
    		}
   </style>
 </head>
 <body>
   <div id="fijo_izquierda">Posicionamiento fijo<br />Izquierda</div>
   <div id="columna">
   <div class="azul"></div>
   <div class="verde"></div>
   <div class="azul"></div>
   <div class="verde"></div>
   <div class="azul"></div>
   <div class="verde"></div>
   <div class="azul"></div>
   <div class="verde"></div>
   <div class="azul"></div>
   <div class="verde"></div>
   <div class="azul"></div>
   <div class="verde">
     <div id="fijo_derecha">Posicionamiento fijo<br />Derecha</div></div>
   </div>
 </body>
 </html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .

Una de las propiedades de este posicionamiento es que si imprimimos la página web y ocupa varias páginas en papel, los elementos fijos se imprimen en todas las páginas, por lo que puede resultar útil para pies y encabezados.

Nota: Intenet Explorer 6 no soportaba este posicionamiento.

Enero-2010

Pág. 7.7

Cursos Informática Gratuitos

Síguenos en: Facebook Sobre aulaClic Política de Cookies