Mantener capa fija en la parte inferior del navegador

En casos como el mensaje de aviso de cookies, nos puede interesar mostrar una capa <div> que esté siempre fija en la parte inferior de la pantalla. En los navegadores nuevos es fácil de asignar el esilo a dicha capa:

1
2
3
4
// Ponemos en nuestra página la capa que contiene el mensaje
<div class="container-cookie">Texto de la cookie</div>
// Ahora en nuestra oja de estilos definimos la posición indicando que se quede fijo en la parte inferior del navegador
.container-cookie { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 9999; }

Podemos ver que indicamos position:fixed, que la deja fija. Con left:0 y bottom:0, le indicamos que en la parte inferior. Con z-index:9999, indicamos que la capa esté sobrepuesta al resto.

Espero que os sea de utilidad.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

*