Mantener capa fija en la parte inferior del navegador
El ejemplo claro es el mensaje que se muestra en la parte inferior referente a las cookies. Se muestra un Div en la parte inferior, por encima del contenido y que ocupa todo el ancho de la pantalla. Cómo mantener esa capa fija en la parte inferior del navegador es lo que veremos en el artículo.
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.
Creamos el bloque div con un contenido y asignándole el estilo container-cookie:
// Ponemos en nuestra página la capa que contiene el mensaje
<div class="container-cookie">Texto de la cookie</div>Una vez creada la capa, ahora debemos asignarle los atributos que la colocará en la parte inferior (position: fixed, left: 0 y bottom: 0), que haga que ocupe todo el ancho del navegador (width: 100%) y que esté por encima del resto de contenido (z-index: 9999;).
// 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; }
Debemos tener en cuenta que en CSS la posición 0,0 es la esquina inferior izquierda del navegador. Que podemos poner los objetos en diferentes capas, unas encima de otras, con el atributo z-index. Con estos atributos ya podemos jugar a colocar nuestro bloque de información de forma atractiva y que no moleste al usuario.
Espero que os sea de utilidad este artículo de cómo mantener esa capa fija en la parte inferior del navegador.
Más información