Como crear una cabecera fija con CSS
En este artículo vamos a ver como crear una cabecera fija utilizando simplemente HTML y CSS.
Cuando un usuario hace scroll para ver más contenido en la pantalla, la cabecera siempre permanece visible dando visibilidad permanente a los elementos que desees incorporar en la cabecera fija. Un menú de navegación puede ser el contenido ideal para una cabecera fija.
Dentro del cuerpo de la página o dentro de la etiqueta <body> puedes agregar todo el contenido de tu página con los siguientes contenedores:
Por un lado, tenemos el contenedor que contiene la cabecera fija, el div con identificador «header» y, luego el contenido de la página lo puedes depositar dentro del contenedor con identificador «content».
En el contenido de la página, contenedor con identificador «content» agrega mucho contenido para ver el efecto.
En la hoja de estilos que estés utilizando agrega las siguientes reglas CSS:
body {
margin: 0;
padding: 60px 0 0 0;
}
#page {
margin: 0px auto;
width: 100%;
}
#header {
position: fixed;
top: 0;
width: 100%;
padding: 15px 20px;
background-color: #333;
font-size: 20px;
color: #FFFFFF;
}
#content {
height: 100%;
overflow: auto;
padding: 0% 1% 0% 1%;
width: 98%;
}Y con este código tan simple ya puedes tener tu cabecera fija con CSS en tu página web.
La clave de la fijación está en asignar una posición fija al elemento con id=»header» con:
position: fixed;Autor
¿Buscas trabajo de programador?
19 respuestas a “Como crear una cabecera fija con CSS”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
En 2022, el método es más sencillo. Basta con asignar por CSS «position:sticky» y «top:0» al elemento que deseas utilizar como cabecera. Ni siquiera es necesario que sea el 1er div: Puedes asignar como cabecera un div que haya a media página y, cuando el usuario haga scroll, en cuando ese elemento alcance la parte superior de la pantalla se quedará adherido al borde superior -de ahí el nombre «sticky».
Hola! buenísimo!, me funciona perfecto, el head queda fijo cuando hago croll por la página. Y logré que el head no quede tapando la parte superior de la página.
El problema que tengo es que en el head, tengo una lista de hipervínculos, que me llevan a distintas secciones de la página. Cuando cliqueo en cada uno de los items de ese listado, y me lleva a la seccion correspondiente, la parte de arriba de dicha sección queda tapada por el head.
como soluciono esto?
Hola,
Cambiando de posición el ancla #.
Saludos
tengo una tabla con mucho volumen de datos pero la tabla esta en una pagina que tiene una barra nav y el fixed que tu pones se va a la parte superior de la pagina bueno listo lo bajo pero luego como hago para que todo lo que pase por encima de la cabecera se oculte y no vuelva aparecer por encima de la cabecera?
Michas gracias.. Te pasaste brother
una pregunta tengo un elemento a mitad de mi pagina ya el problema es que al momento d hacer scroll asta la parte donde tengo ese elemento se sube todo o mejor dicho se tapa, quisiera saber como puedo hacer para q en ese instante tome la posicion fija para que al momento de seguir bajando se quede ahy mismo ese elemento es decir no se tape…noc si m doy a entender pero gracias por tu respuesta d antemano
Muy útil la cabecera, el único problema que tengo con ella es al hacer uso de anclas situadas en la página, pues cuando un navegador te redirige hacia una la sitúa automáticamente en la parte superior quedando oculta tras la cabecera y obligando a subir el scroll hasta poder verla. Alguien se le ocurre alguna solución (a poder ser usando únicamente css).
Gracias por la guía.
Hola, como puedo crear un FRAME a un CMS como wordpres? lo que quiero es tener una cabecera fija y meter un reprod de musica que no se refresque y no se corte el audio y abajo la pagina completa wordpress que se navegue trankilamente mientras no se corte el audio, como puedo hacer esto? salu2
Hola, no entendi; al primer codigo:
cabecera
contenido
DONDE LO PONGO? o que nombre le pongo? index.html? o lo meto en con el codigo de mi index.php?
Al segundo codigo donde lo inserto? podrias ser mas especifico? que no se entiende la verdad. GRACIASS
La segunda parte del código es CSS, lo tendrás que meter en alguna hoja de estilos que tengas en tu proyecto o dentro del
englobado por la etiquetahola! quiero dividir la cabecera en 5 partes como le ago??? ayudaaa!!!
Bueno, facil, no? poner 5 divs dentro con float:left;
buenas!
busco lo mismo e hice lo de position:fixed;
pero lo que tengo abajo del encabezado me sube arriba y el encabezado lo tapa… tengo que ponerle al resto del contenido posicion absoluta o que hago?
Gracias!
Tendríamos que ver tu web para responder
Muchas gracias, pude crear una cabecera fija.
Una consulta nada mas, ¿se pueden agregar botones a la cabecera fija?
todo lo que quieras se puede añadir
Genial! Gracias, está muy clarito para los que no somos muy expertos. Me has salvado la vida!!!
Gracias!!! Sencillo, útil y muy bien explicado.
Muchísimas gracias, estoy haciendo mi primera página web y esto es justo lo que necesitaba, me salvaste.
Gracias por compartir tu sabiduría con los demás.
Un saludo.