Cómo Crear Una Cabecera Fija Con HTML y CSS
Cómo Crear Una Cabecera Fija Con HTML y CSS
Cómo Crear Una Cabecera Fija Con HTML y CSS
Contenido
Recursos
Contacto
Ingresar a AMK
Pro
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 1/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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.
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.
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 3/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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:
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 4/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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;
24 font-weight: 700;
25 font-size: 1.2em;
26 }
27
28 #logo-header .site-desc {
29 display: block;
30 font-weight: 300;
31 font-size: 0.8em;
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 }
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 5/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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 }
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
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 6/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
Fijando la cabecera
Ok, llegó el momento de jar la cabecera, para ello, agregaremos algunas
propiedades al selector #main-header:
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.
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 7/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
Con esto conseguimos que la cabecera siga ja, pero que no cubra el contenido
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 8/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
EDIT ON
HTML CSS Result
FranciscoAMK
Inicio Acerca de Contacto
Diseño web / WordPress / Tutoriales
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.
Un abrazo,
@FranciscoAMK
::
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 9/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
SEGUIR LEYENDO...
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 10/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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...
SEGUIR LEYENDO...
Hay 36 opiniones
Alberto dice:
RESPONDER
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 11/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
RESPONDER
Víctor dice:
Un saludo
RESPONDER
RESPONDER
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 12/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
Gracias!!
RESPONDER
¡Buena idea!
RESPONDER
Alicia dice:
Gracias,muy útil.
RESPONDER
Miguel dice:
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 13/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
RESPONDER
#cabecera {
z-index: 100; /* o superior */
}
RESPONDER
Cordial saludo!.
Exito
RESPONDER
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 14/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
barretto dice:
RESPONDER
Higinio dice:
RESPONDER
Higinio dice:
RESPONDER
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 15/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
RESPONDER
Higinio dice:
RESPONDER
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,
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 16/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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:
RESPONDER
María dice:
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 17/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
RESPONDER
Abdel dice:
RESPONDER
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:
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 18/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
RESPONDER
Umiki dice:
RESPONDER
abraham dice:
RESPONDER
David dice:
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 19/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
RESPONDER
Angelica dice:
RESPONDER
RESPONDER
gustavo dice:
RESPONDER
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 20/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
David dice:
RESPONDER
DORIS dice:
RESPONDER
Alex dice:
Dicho esto, me gustaría saber si podrías echar una mano con una
duda que me surge en este tema.
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 21/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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:
RESPONDER
mrojas6996 dice:
RESPONDER
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 22/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
TheCube
RESPONDER
RESPONDER
SuperAnonimo dice:
RESPONDER
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 23/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
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...
PUBLICAR OPINIÓN
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 24/25
18/3/2019 Cómo crear una cabecera fija con HTML y CSS - Francisco Aguilera G.
https://franciscoamk.com/como-crear-una-fija-estatica-con-html-y-css/ 25/25