Posicionamiento fijo

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 58 de 76.

En CSS, el posicionamiento fijo mantiene un elemento en el mismo lugar de la pantalla, sin importar cuánto te desplaces. Cuando estableces position: fixed;, el elemento se elimina del flujo normal del diseño, por lo que otros elementos lo ignoran. Permanece fijo en la ventana del navegador, lo que lo hace útil para encabezados, pies de página o menús que siempre deben estar visibles.

Aquí está la sintaxis básica para usar el posicionamiento fijo:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Esta declaración establece el esquema de posicionamiento del elemento como fijo.

top, right, bottom, left: Estas propiedades especifican la posición del elemento en relación con la ventana de visualización (viewport). Puedes usar valores positivos o negativos, especificados en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas.

Por ejemplo:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

En este ejemplo, el elemento con la clase header está fijado en la parte superior del viewport con position: fixed;, top: 0; y left: 0;.

Desafío

Fácil

Se te proporciona un documento HTML con un encabezado (<div>) y un párrafo (<p>). Tu tarea es utilizar el posicionamiento fijo para que el encabezado permanezca en la parte superior de la ventana de visualización (viewport) incluso cuando se desplace la página. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <div> con la clase header.
Establece la propiedad position del elemento .header en fixed.
Establece la propiedad top del elemento .header en 0 y la propiedad left en 0. Esto posicionará el encabezado en la esquina superior izquierda de la ventana de visualización.
Establece la propiedad width del elemento .header en 100% para que se extienda por toda la ventana de visualización.
Establece la propiedad background-color del elemento .header en #fcc726 (amarillo dorado) para que sea visible frente al contenido de la página.
Establece la propiedad text-align en center, para que se vea mejor.

Hoja de referencia

El posicionamiento fijo mantiene un elemento en el mismo lugar de la pantalla independientemente del desplazamiento. El elemento se elimina del flujo normal del diseño.

Sintaxis básica:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

Ejemplo - fijar un elemento en la parte superior izquierda de la ventana de visualización (viewport):

.header {
    position: fixed;
    top: 0;
    left: 0;
}

Las propiedades de posición (top, right, bottom, left) especifican la posición del elemento en relación con la ventana de visualización y aceptan valores en píxeles, ems, porcentajes u otras unidades de CSS.

Pruébalo tú mismo

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>