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.

Información relacionada

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*