Cómo mantener un encabezado estático que se mueve incluso al desplazarse en HTML (En 6 Pasos)

Por brandy alexander
Cómo mantener un encabezado estático que se mueve incluso al desplazarse en HTML (En 6 Pasos)
Polka Dot RF/Polka Dot/Getty Images

Cuando agregas un encabezado a tu página web HyperText Markup Language (HTML), este elemento desaparece a medida que te desplazas hacia abajo en una ventana del navegador por defecto. Esto es a menudo problemático si tienes vínculos o cualquier otra información esencial que necesita ser fijada en su lugar de manera que esté siempre visible. El uso de hojas de estilo en cascada (CSS, por sus siglas en inglés), en conjunción con HTML, puede mantener tu cabecera estática de manera que no se mueva.

Paso 1

Inicia tu aplicación de edición de texto y abre el documento web que tiene el encabezado que deseas modificar.

Paso 2

Coloca el cursor antes del final de la etiqueta y escribe el siguiente código CSS:

La norma de cabecera administra el contenido de la cabecera, mientras que el estilo contenedor controla el cuerpo principal de tu página web.

Paso 3

Introduce "position: fixed;" dentro de los corchetes de la regla de encabezado y escribe "background-color: ;" y "height: ;" después de este. Introduce un valor de color hexadecimal después del atributo color de fondo y escribe un valor numérico en píxeles después de la altura para definir esta medida. Por ejemplo:

header { position: fixed; background-color: #ffff00; height: 100px; }

La posición fija especifica que deseas que el encabezado permanezca en su lugar en la página, mientras que el color de fondo muestra un matiz diferente para que tu cabecera esté visible cuando se mueve más allá de la página principal.

Paso 4

Introduce "margin-top: ;" dentro del estilo recipiente e introduce un valor numérico en píxeles que coincida con la altura de tu cabecera. Tu completa CSS ahora se parece al siguiente ejemplo:

La adición de un margen para la regla recipiente desplaza tu contenido principal debajo de la cabecera.

Paso 5

Introduce "

" al final. Además, introduce "
" después de la cabecera e ingresa tu contenido del sitio web entre estas etiquetas div. Por ejemplo:

Este es el contenido de tu página.

Paso 6

Guarda el archivo. Tu cabecera será ahora estática.