right

<< left top >>

La propiedad right se usa para posicionar un elemento horizontalmente desde el borde derecho de su punto de referencia, es decir, es la contraparte de left.

Al igual que left, right sólo funciona si el elemento tienen una propiedad position establecida diferente a static.

<div class="contenedor-padre">
  Contenedor Padre
  <div class="caja-absolute">Caja Absolute (right: 10px)</div>
</div>

Uso de left y right juntos

Cuando usas position: absolute y defines tanto left como right (junto con top y bottom), puedes forzar al elemento a estirarse para llenar el espacio horizontal completo entre esos dos límites.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Estiramiento con Absolute</title>
    <link rel="stylesheet" href="nuevo.css">
</head>
<body>

    <div class="contenedor-relativo">
        Contenedor Padre (Anchura: 80% del viewport)
        
        <div class="caja-estirada">
            ¡Estoy estirada! Empiezo a 50px del borde izquierdo y termino a 50px del derecho.
        </div>
    </div>

</body>
</html>

<< left top >>