Teoría
Teoría

Posicionamiento fijo

El valor fixed de la propiedad position activa el posicionamiento fijo de un elemento.

El posicionamiento fijo se parece al absoluto, pero tiene algunas diferencias:

El elemento con posicionamiento fijo también sale del flujo.
Queda vinculado a un punto de la ventana del navegador y permanece ahí incluso al desplazarte por la página.
Puedes ubicarlo con top, left, right y bottom, pero, en este ejercicio, su punto de referencia está vinculado a la ventana del navegador.

Imagina el elemento como una nota adhesiva pegada al monitor. Este posicionamiento suele usarse para crear barras de navegación que permanecen en la parte superior o inferior de la ventana.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Posicionamiento fijo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block">Bloque 1</div> <div class="block">Bloque 2</div> <div class="block">Bloque 3</div> <div class="block-fixed">Bloque 4. Desplázate por la página y comprueba que este bloque no se mueve.</div> <div class="block">Bloque 5</div> </body> </html>

CSS

body { padding: 20px; } .block { min-height: 190px; margin-bottom: 20px; padding: 10px; color: white; background-color: #3a78a1; } .block-fixed { margin-bottom: 20px; padding: 10px; color: white; background-color: rgba(255, 0, 0, 0.5); }

ObjetivosRealizado

Al bloque con la clase block-fixed, asígnale:

posicionamiento fijo,
una coordenada izquierda de 10px,
y una coordenada superior de 10px.