Unidad 13. Posicionamiento. Flexbox. Grid (V)



13.5. Posicionamiento fijo

En este vídeo explicamos el posicionamientop fijo y sticky:Videotutorial

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 al body, es decir, respecto 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>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Posicionamiento fijo</title>
<link rel="stylesheet" type="text/css" href="css/ejemplo_13_fijo.css" />
</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="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>

El código de la hoja de estilo es el siguiente:

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;
}

Puedes ver el resultado en este enlace: ejemplo_fijo

Como se decía con el posicionamiento absoluto, los elementos pueden llegar a solaparse si el ancho no es suficiente. 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.


Enero-2019 (V 2.02)
Pág. 13.5
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

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


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.