Teoría
Teoría

position: absolute y la propiedad right

La propiedad right define la distancia entre el borde derecho de la ventana del navegador y el borde derecho del elemento con posicionamiento absoluto.

Con esta propiedad puedes colocar fácilmente un elemento de cualquier ancho junto al borde derecho de la ventana. Si asignas un valor negativo a right, el elemento se desplazará más allá de ese borde y aparecerá una barra de desplazamiento.

La combinación de top y right permite ubicar elementos desde la esquina superior derecha.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>position: absolute y la propiedad right</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block">Bloque 1</div> <div class="block-absolute">Bloque 2</div> <div class="block">Bloque 3</div> </body> </html>

CSS

body { padding: 20px; } .block { margin-bottom: 20px; padding: 10px; text-align: center; color: white; background-color: #3a78a1; } .block-absolute { position: absolute; width: 100px; margin-bottom: 20px; padding: 10px; color: white; background-color: rgba(255, 0, 0, 0.5); }

ObjetivosRealizado

Asigna al bloque con la clase block-absolute la propiedad right:

con el valor 10px,
después cambia su valor a -50px.