Cómo Crear Una Cabecera Fija Con HTML y CSS

18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
Acerca CURSOS DE DISEÑO
Contenido
Recursos
Contacto
Ingresar a AMK
Pro
DISEÑO, TUTORIALES | 14 DE OCTUBRE DE 2014
Cómo crear una cabecera ja

con HTML y CSS
por Francisco Aguilera G.
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 1/25
Hay una versión actualizada de este tutorial en formato video y

haciendo la cabecera responsive, puedes encontrarlo en Cómo crear
una cabecera ja responsive con HTML y CSS.
En el artículo de hoy quiero mostrarte de qué manera puedes crear una cabecera
ja para tu sitio, tal como la que puedes ver en este mismo sitio. Me re ero a una
cabecera que se queda pegada e la parte superior de la ventana, incluso aunque
hagas scroll hacia abajo.
Para comprender este tutorial por completo necesitarás un entendimiento básico

de HTML y CSS, si aún no conoces de estos lenguajes, te recomiendo mi curso
“Diseño web: HTML y CSS desde cero“.
Bueno, basta de introducción, vamos al tutorial
HTML Base
Lo primero, por supuesto será maquetar el HTML que compondrá nuestra página.
Para efectos de este ejemplo crearemos una cabecera, que contendrá el nombre
del sitio y el menú de navegación. Luego tendremos el contenido, que tendrá un
título, una imagen y varios párrafos de texto, para nalizar con el pie de página.
El código para esto sería el siguiente:
Maquetado de la página XHTML

1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
4 <meta charset="utf-8">
5 <title>Cabecera fija</title>
6
7 <link rel="stylesheet" href="style.css">
8 </head>
9
10 <body>
11
12 <header id="main-header">
13
14 <a id="logo-header" href="#">
15 <span class="site-name">FranciscoAMK</span>
16 <span class="site-desc">Diseño web / WordPress / Tutoriales</span>
17 </a> 

18
19 <nav>
20 <ul>
21 <li><a href="#">Inicio</a></li>
22 <li><a href="#">Acerca de</a></li>
23 <li><a href="#">Contacto</a></li>
24 </ul>
25 </nav>
26
27 </header>
28
29
30 <section id="main-content">
31
32 <article>
33 <header>
34 <h1>Esta es una página con cabecera fija</h1>
35 </header>
36
37 <img src="http://placekitten.com/800/250" alt="Gatito" />
38
39 <div class="content">
40 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed d
o eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ven
iam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conse
quat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
41
43
45
46 </div>
47
48 </article> 
49
50 </section> 
51
52
53
54 <footer id="main-footer">
55 <p>© 2014 <a href="http://FranciscoAMK.com">FranciscoAMK.com</a></p>
56 </footer> 
57
58
59 </body>
60 </html>
Con esto estaríamos obteniendo algo más o menos como esto:
Estilos generales
Ahora es momento de aplicar algunos estilos generales para que la página tenga
algo de diseño. Usaremos CSS en el archivo style.css. Este es el código que
usaremos para de nir los estilos generales:
Estilos generales CSS

1 body {
2 margin: 0;
3 padding: 0;
4 font-family: Helvetica, Arial, sans-serif;
5 color: #666;
6 background: #f2f2f2;
7 font-size: 1em;
8 line-height: 1.5em;
9 }
10
11 h1 {
12 font-size: 2.3em;
14 margin: 15px 0;
15 text-align: center;
16 font-weight: 300;
17 }
18
19 p {
20 margin: 0 0 1.5em 0;
21 }
22
23 img {
24 max-width: 100%;
25 height: auto;
26 }
Estas líneas de CSS las usaremos para dar estilo a la cabecera:
Estilos de cabecera CSS

1 #main-header {
2 background: #333;
3 color: white;
4 height: 80px;
5 }
6 #main-header a {
7 color: white;
8 }
9
10 /*
11 * Logo
12 */
13 #logo-header {
14 float: left;
15 padding: 15px 0 0 20px;
16 text-decoration: none;
17 }
18 #logo-header:hover {
19 color: #0b76a6;
20 }
21
22 #logo-header .site-name {
23 display: block;
26 }
27
28 #logo-header .site-desc {
29 display: block;
32 color: #999;
33 }
34
35
36 /*
37 * Navegación
38 */
39 nav {
40 float: right;
41 }
42 nav ul {
43 margin: 0;
44 padding: 0;
45 list-style: none;
46 padding-right: 20px;
47 }
48
49 nav ul li {
50 display: inline-block;
51 line-height: 80px;
52 }
53
54 nav ul li a {
55 display: block;
56 padding: 0 10px;
57 text-decoration: none;
58 }
59
60 nav ul li a:hover {
61 background: #0b76a6;
62 }
Con estos estilos aplicaremos diseño al contenido:
Estilos de contenido CSS

1 #main-content {
2 background: white;
3 width: 90%;
4 max-width: 800px;
5 margin: 20px auto;
6 box-shadow: 0 0 10px rgba(0,0,0,.1);
7 }
8
9 #main-content header,
10 #main-content .content {
11 padding: 40px;
12 }
Y por último, con esto estilizaremos el pie de página:
Estilos pie de página CSS

1 #main-footer {
2 background: #333;
3 color: white;
4 text-align: center;
5 padding: 20px;
6 margin-top: 40px;
7 }
8 #main-footer p {
9 margin: 0;
10 }
11
12 #main-footer a {
13 color: white;
14 }
Hasta ahora la página se ve bastante bien, pero aún no hacemos que la cabecera
sea estática, pero tranquilo ya llegaremos a ello, recuerda que soy diseñador y
me gusta que las cosas se vean bien
Así está la página actualmente:
Fijando la cabecera
Ok, llegó el momento de jar la cabecera, para ello, agregaremos algunas
propiedades al selector #main-header:
Fijando la cabecera CSS

1 #main-header {
2 background: #333;
3 color: white;
4 height: 80px;
5
6 width: 100%; /* hacemos que la cabecera ocupe el ancho completo de la página */
7 left: 0; /* Posicionamos la cabecera al lado izquierdo */
8 top: 0; /* Posicionamos la cabecera pegada arriba */
9 position: fixed; /* Hacemos que la cabecera tenga una posición fija */
10 }
Con esto ya conseguimos que la cabecera se je en la parte superior, aunque

lamentablemente queda cubriendo el contenido.
Esto ocurre ya que cuando usamos la propiedad “position” con el valor “ xed” el
elemento al cual aplicamos este estilo se sale del ujo natural del contenido y se
posiciona de manera ja de acuerdo a las coordenadas “left“, “top“, “right” y
“bottom” por encima del resto de los elementos.
Así está quedando actualmente:
Solucionar esto es bien sencillo, solo debemos añadir al elemento body, un

padding o relleno superior igual a la altura de la cabecera. Entonces quedaría así:
Relleno superior CSS

1 body {
2 margin: 0;
3 padding: 0;
4 font-family: Helvetica, Arial, sans-serif;
5 color: #666;
6 background: #f2f2f2;
7 font-size: 1em;
9
10 padding-top: 80px; /* Relleno superior igual a la altura de la cabecera*/
11 }
Con esto conseguimos que la cabecera siga ja, pero que no cubra el contenido
Mira un ejemplo completamente funcional a continuación. Puedes mirar el código

fuente, crear una copia y editarlo a tu antojo.
EDIT ON
HTML CSS Result
FranciscoAMK
Inicio Acerca de Contacto
Diseño web / WordPress / Tutoriales
Esta es una página con

cabecera fija
Resources 1× 0.5× 0.25× Rerun
El código que vimos en este tutorial debería funcionar bien para todos los
navegadores modernos. Está probado en las últimas versiones de Chrome, Safari,
Firefox y Ópera en mac.
Cuéntame en los comentarios si te resulta interesante este tema para seguir

publicando más material de este tipo.
Un abrazo,
@FranciscoAMK
::
Crédito de las imágenes de gatitos.
TAMBIÉN TE PODRÍA INTERESAR:
Introducción a Gutenberg, el futuro editor de WordPress

Gutenberg es el futuro editor de WordPress que reemplazará el actual editor TinyMCE. Por el
momento, antes de que Gutenberg sea el editor o cial de WordPress, lo podemos probar a través
de la instalación de un plugin, pero atención, que no se recomienda aún usarlo en sitios o ciales
ya que aún está en desarrollo. Si […]
SEGUIR LEYENDO...
Buscar clientes o atraerlos ¿Qué es mejor?
En este episodio de Huevos Revueltos hablamos sobre cuál es la mejor mentalidad para tener
clientes: Buscarlos o atraerlos. Esta es la segunda temporada de Huevos Revueltos donde
tratamos temáticas relacionadas al negocio de trabajar como independiente o freelance. Un
abrazo, @FranciscoAMK
SEGUIR LEYENDO...
Diseñando Las Grá cas De Un Curso En Adobe XD

Este es el primer episodio de una nueva sección la cual llamaremos «Diseñando con Francisco» o
simplemente «Diseñando». En esta serie de videos iré compartiendo contigo los procesos de
diferentes piezas que vaya diseñando para algún proyecto personal, para este sitio web o para
alguno de mis cursos. En esta ocasión te muestro el proceso […]
SEGUIR LEYENDO...
Hay 36 opiniones
Alberto dice:
Muy bien explicado Fran, como siempre.

Un saludo.
RESPONDER
Francisco Aguilera G. dice:
RESPONDER
Víctor dice:
Hola Francisco, interesante el artículo. Gracias por compartirlo

con nosotros.
Faltaría que el menú se pudiese ver en una pantalla pequeña, de
un móvil por ejemplo.
¿No crees?
Un saludo
RESPONDER
Claro que sí, pero eso ya es material para otro tutorial, lo

tendré en cuenta
RESPONDER
Iván Ortega dice:
Muy buen artículo.
Me gustaría un artículo similar para hacer una tabla con cabecera

ja.
Gracias!!
RESPONDER
¡Buena idea!
RESPONDER
Alicia dice:
Gracias,muy útil.
RESPONDER
Miguel dice:
Hola. Estoy creando un sitio y tengo el problema de que al poner

la cabecera ja, al hacer scroll hacia abajo la imagen del
slideshow pasa por encima del header. ¿Tienes alguna
sugerencia para solucionarlo? Lo he intentado todo y no hay
manera. Ya lo he dejado por imposible con mis todavía escasos
conocimientos de estas artes… Gracias amigo.
RESPONDER
Procura que tu cabecera tenga la propiedad “z-index” con

un valor superior al que tienen los slides del slideshow.
Prueba con algo como:
#cabecera {
z-index: 100; /* o superior */
}
RESPONDER
Juniors Quintana dice:
Cordial saludo!.
La redifusion de este tutorial por parte de usted me ha saco de

un apuro, actualmente estoy desarrollando la pagina web del
centro diagnostico ipocrates http://cdipocrates.com
http://cdipocrates.hol.es, y tenia un pequeño problema ya que
cuando el menu de navegacion “Fixed” me distorsionaba la
galeria por la cuestion de posicionamiento de la misma.
gracias amigo.
Exito
RESPONDER
barretto dice:
Muy buen tutorial…..me sirvio mucho….y me funciono…….pero

seria bueno que anexes links con mas casos diversos sobre
cabeceras jas…….en este caso la cabecera ocupa toda la
pagina…pero las que en donde el body tienen margin??…..como
se procede??……o no se que otros casos complicados se pueden
presentar cuando uno quiere jar cualquier cabecera de
cualquier estilo……..fuera de eso……repito estuvo buenazo tu
tutorial……..muchas gracias….suerte…saludos…bye…
RESPONDER
Higinio dice:
Muchas gracias, muy muy bien explicado!

Lo he hecho por etapas, lanzando la pagina cada vez que he
adicionado el codigo css, asi he podido ver las mejoras.
RESPONDER
Higinio dice:
Es posible hacer un menu vertical a la izquierda pero que se

quede jo haciendo el scrolling?
Muchas gracias
RESPONDER
Sip, como el que hice en http://biobiocine.com/.

Revisa el código fuente
RESPONDER
Higinio dice:
Gracias Francisco por tu rapida respuesta

Se ve muy bonito, pero yo a lo que me referia era que
la parte izquierda (su menu destacado) quedase ja
tambien, quedando la parte de contenido la parte
scrollable.
Gracias!
RESPONDER
Henry Salas dice:
Hola Francisco.
El post me ha parecido genial y he empezado a aprender mucho
a partir de él ¡Muchas gracias! Sin embargo, al tratarlo de
implementar a un proyecto personal que estoy realizando, me ha
causado problemas usando el navegador Chrome.
La sección de navegación es precisamente lo que me causa el
problema. Mientras que en Firefox se muestra el bloque linean,
con las opciones que yo deseé agregar, en Chrome no lo hace

así y pone uno o más elementos en una segunda línea.
He tratado de investigar por mi cuenta alguna posible solución

pero sigo sin tener éxito ¿A qué crees que se deba esto?
Saludos.
RESPONDER
Salatiel dice:
Hola
Que passa cuando yo trato de cambiarme a otra opcion del menu
El encabezado se mantiene o se quita?
RESPONDER
luisa dice:
me encanto al n alguien que explica bien :v me salvaste la vida
RESPONDER
María dice:
Muy buena explicación, aunque sucede que tengo elaces que

me llevan a un lugar especí co en la página y la cabecera tapa la
parte inicial del titulo al que me dirije el enlace ¿Sabes como

solucionarlo?
RESPONDER
Abdel dice:
Maria podrías aplicarle un margin al titulo y listo:

#titulo {
margin-top: 1em;
}
RESPONDER
Adolfo Gomez dice:
Hola,
Francisco, estoy tratando de encontrar un CSS que me permita
generar el efecto del sitio http://www.peonetas.cl/ en el menú
donde esta transparente y después al hacer scroll este cambia
de color.
Espero de tu ayuda por favor.
RESPONDER
Ferran dice:
Como se podría hacer para que el menú jo se mueva cuando

llegue al top de la pagina?
Ejemplo: http://www.samsung.com/es/smartphones/galaxy-s8/
Por cierto me ayudaste con el menú.
RESPONDER
Umiki dice:
Muchas gracias por compartir. Aquí encontré la clave:

width: 100%;
left: 0;
top: 0;
position: xed;
Lo demás es jugar!
RESPONDER
abraham dice:
mira una duda todo lo de el codigo css va dentro de la página

principal o hay que crear otra?
RESPONDER
David dice:
da lo mismo, puedes hacerlo en el body dentro del tag o con

un relacionarlo a una hoja de estilos en otra ubicación :).
Saludos
RESPONDER
Angelica dice:
Todo lo del codigo del css va en un solo documento?
RESPONDER
Sip, puede ser la hoja de estilos de tu página o en el

mismo header.
RESPONDER
gustavo dice:
genial es lo que estaba buscando, y por n lo encontre, y lo

puede aplicar a bloggers.
Saludos.
RESPONDER
David dice:
Amigo, muchas gracias por el tutorial y super bien explicado

todo, directo a mis favoritos. Gracias.
RESPONDER
DORIS dice:
Muy buena aportación …muchas gracias
RESPONDER
Alex dice:
Muy buenas Fran!
Antes de nada, quería decir que esta explicado mejor imposible.

Enhorabuena por el trabajo bien hecho, y gracias por compartir
tus conocimientos.
Dicho esto, me gustaría saber si podrías echar una mano con una
duda que me surge en este tema.
No puedo pegar imágenes en el comentario, y quizás así hubiera

sido mas fácil de explicar, pero aun así, voy a intentar hacerlo
Tengo el menu jo implementado arriba en mi página. El tema es

que si ponemos un opacity:0.2 por ejemplo, vemos como cuando
hay scroll, el menu sólo actúa como tal porque esta ‘por arriba’
del texto, pero éste sigue saliendo de la pantalla por si sitio por
defecto. Qué me origina esto? Que por ejemplo los enlaces
internos a modo de #seccion_n en mi página no se posicionen
correctamente, porque lo hace arriba del todo, pero ahi esta el
menu en realidad. Me explico? Sería genial para mi que el scroll
de la página acabara donde acaba el menu superior. Es esto
posible?
Muchas gracias!
RESPONDER
Ernesto dice:
Yo tengo una duda, tengo un header que es transparente y

cuando bajo por la pagina el menú se sigue mostrando, ¿como
puedo ponerle un limite para que ya no se siga bajando?
RESPONDER
mrojas6996 dice:
Me parece una excelente explicación y me ha sido muy util.

Muchas gracias!
RESPONDER
alejo molla dice:
ah oye yo no estudie programacio apenas tengo 12 años y estoy

en segundo año en tercero pasare a elegir carrera quiero ser
ingeniero en sistema y sin estudio alguno las pagnas me quedan
geniales pero ahora tengo un problema
TheCube
y cuando bajo, la imagen y el texto se ponen arriba de la barra

me ayudas porfavor
RESPONDER
Parece que pegaste un código acá, pero se perdió al

publicar el comentario, te recomiendo subir el código a
https://codeshare.io/ y luego por acá el link.
RESPONDER
SuperAnonimo dice:
Wow y yo buscando por tantas horas. esto de ser backend, nos

limita en ver lo obvio del diseño
RESPONDER
Y tú ¿Qué opinas?
Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu
email no se mostrará ;)
Escribe tu opinión...
Tu nombre Tu email Tu sitio web
PUBLICAR OPINIÓN
2019 © FranciscoAMK ( Francisco Aguilera G. ) • Diseñado por APK Estudio

Cómo Crear Una Cabecera Fija Con HTML y CSS

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Cómo Crear Una Cabecera Fija Con HTML y CSS

Încărcat de

Drepturi de autor:

Formate disponibile

18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.

Acerca CURSOS DE DISEÑO

DISEÑO, TUTORIALES | 14 DE OCTUBRE DE 2014

Cómo crear una cabecera ja

Hay una versión actualizada de este tutorial en formato video y

Para comprender este tutorial por completo necesitarás un entendimiento básico

Bueno, basta de introducción, vamos al tutorial

El código para esto sería el siguiente:

Maquetado de la página XHTML

17 </a>

Con esto estaríamos obteniendo algo más o menos como esto:

Estilos generales CSS

Estas líneas de CSS las usaremos para dar estilo a la cabecera:

Estilos de cabecera CSS

Con estos estilos aplicaremos diseño al contenido:

Estilos de contenido CSS

Y por último, con esto estilizaremos el pie de página:

Estilos pie de página CSS

Así está la página actualmente:

Fijando la cabecera CSS

Con esto ya conseguimos que la cabecera se je en la parte superior, aunque

Así está quedando actualmente:

Solucionar esto es bien sencillo, solo debemos añadir al elemento body, un

Relleno superior CSS

Mira un ejemplo completamente funcional a continuación. Puedes mirar el código

Esta es una página con

Resources 1× 0.5× 0.25× Rerun

Cuéntame en los comentarios si te resulta interesante este tema para seguir

Crédito de las imágenes de gatitos.

TAMBIÉN TE PODRÍA INTERESAR:

Introducción a Gutenberg, el futuro editor de WordPress

Buscar clientes o atraerlos ¿Qué es mejor?

Diseñando Las Grá cas De Un Curso En Adobe XD

Muy bien explicado Fran, como siempre.

Francisco Aguilera G. dice:

Hola Francisco, interesante el artículo. Gracias por compartirlo

Francisco Aguilera G. dice:

Claro que sí, pero eso ya es material para otro tutorial, lo

Iván Ortega dice:

Muy buen artículo.

Me gustaría un artículo similar para hacer una tabla con cabecera

Francisco Aguilera G. dice:

Hola. Estoy creando un sitio y tengo el problema de que al poner

Francisco Aguilera G. dice:

Procura que tu cabecera tenga la propiedad “z-index” con

Juniors Quintana dice:

La redifusion de este tutorial por parte de usted me ha saco de

Muy buen tutorial…..me sirvio mucho….y me funciono…….pero

Muchas gracias, muy muy bien explicado!

Es posible hacer un menu vertical a la izquierda pero que se

Francisco Aguilera G. dice:

Sip, como el que hice en http://biobiocine.com/.

Gracias Francisco por tu rapida respuesta

Henry Salas dice:

con las opciones que yo deseé agregar, en Chrome no lo hace

He tratado de investigar por mi cuenta alguna posible solución

me encanto al n alguien que explica bien :v me salvaste la vida

Muy buena explicación, aunque sucede que tengo elaces que

parte inicial del titulo al que me dirije el enlace ¿Sabes como

Maria podrías aplicarle un margin al titulo y listo:

Adolfo Gomez dice:

Como se podría hacer para que el menú jo se mueva cuando

Muchas gracias por compartir. Aquí encontré la clave:

mira una duda todo lo de el codigo css va dentro de la página