Propiedad CSS right
Cómo usar la propiedad CSS right para establecer la posición derecha de un elemento. Consulta los valores de la propiedad en uso y practica.
La propiedad CSS right establece el desplazamiento horizontal de un elemento posicionado — qué tan lejos queda su borde derecho de un borde de referencia. Por sí sola no hace nada; solo surte efecto una vez que se le asigna al elemento un valor de position distinto al valor predeterminado static.
Esta página explica cómo se comporta right bajo cada esquema de posicionamiento, cómo interactúa con left y los errores comunes que hay que evitar.
Cómo funciona right
El borde de referencia desde el que mide right depende completamente del valor de position del elemento:
absoluteofixed—rightes la distancia entre el borde derecho del elemento y el borde derecho de su bloque contenedor (paraabsolute, el ancestro posicionado más cercano; parafixed, el viewport).relative—rightdesplaza el elemento hacia la izquierda desde su posición normal en la cantidad indicada, mientras que el espacio que ocupaba originalmente se conserva. (El nombre resulta contraintuitivo: un valor positivo derightmueve el elemento alejándolo de la derecha, es decir, hacia la izquierda.)sticky—rightes la distancia desde el borde derecho del contenedor de desplazamiento a la que el elemento "se adhiere" mientras se hace scroll.static—rightno tiene ningún efecto.
Si position es static (el valor predeterminado), right se ignora. Establece primero position: relative, absolute, fixed o sticky.
right vs left
Si estableces tanto left como right en el mismo elemento, el resultado depende del width y la dirección de escritura:
- Con
width: auto, el elemento se estira para satisfacer ambos desplazamientos — útil para anclar un elemento a una distancia fija de cada lado de su contenedor. - Con un
widthfijo, los dos sobrecondicionarían la caja. En texto de izquierda a derecha,leftgana yrightse ignora; en texto de derecha a izquierda,rightgana.
Cuando solo necesitas un desplazamiento horizontal, establece únicamente left o únicamente right y deja el otro en auto.
| Valor inicial | auto |
|---|---|
| Se aplica a | Elementos posicionados. |
| Heredado | No. |
| Animable | Sí. La posición del elemento es animable. |
| Versión | CSS2 |
| Sintaxis DOM | Object.style.right = "50px"; |
Sintaxis
right: auto | length | percentage | initial | inherit;Ejemplos
Ejemplo con un valor en px
Aquí la imagen se saca del flujo normal con position: absolute y se ancla 35px desde el borde derecho de la página.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
position: absolute;
right: 35px;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
</body>
</html>Resultado
Ejemplo con un valor en %
Un valor en porcentaje se resuelve sobre el ancho del bloque contenedor, por lo que right: 30% mantiene el desplazamiento proporcional a medida que el contenedor cambia de tamaño.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
height: 150px;
width: 100%;
background-color: #ccc;
color: #ffffff;
}
img {
position: absolute;
right: 30%;
top: 120px;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs logo" width="146" height="41" />
<div>This is some div element.</div>
</body>
</html>Ejemplo con el valor initial
initial restablece right a su valor predeterminado de auto, permitiendo que el navegador coloque el borde derecho automáticamente según los otros desplazamientos y el tamaño de la caja.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
position: relative;
max-width: 300px;
line-height: 20px;
}
p {
position: absolute;
right: initial;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Right property example</h2>
<div>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs
<p>Some text</p>
</div>
</body>
</html>Valores
| Valor | Descripción | Pruébalo |
|---|---|---|
| auto | Establece la posición del borde derecho. Es el valor predeterminado de esta propiedad. | Pruébalo » |
| length | Establece la posición del borde derecho con px, em, rem, etc. Se permiten valores negativos. | Pruébalo » |
| % | Establece la posición del borde derecho con % del elemento contenedor. Se permiten valores negativos. | Pruébalo » |
| initial | Establece la propiedad a su valor predeterminado (auto), lo que permite al navegador calcular la posición automáticamente. | Pruébalo » |
| inherit | Hereda la propiedad del elemento padre. |
Propiedades relacionadas
La propiedad right es una de las cuatro propiedades de inserción que funcionan junto con position:
left— desplaza el borde izquierdo del elemento.top— desplaza el borde superior del elemento.bottom— desplaza el borde inferior del elemento.