| Definición | Indica el desplazamiento entre el borde derecho del elemento y la parte derecha de su elemento contenedor |
|---|---|
| Valores permitidos | Alguno o todos los siguientes valores y en cualquier orden: |
| Si se utilizan porcentajes, hace referencia a la anchura del elemento en el que se encuentra | |
| Valor inicial | auto |
| Se aplica a | Los elementos posicionados |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS2/visuren.html#propdef-right |
Ejemplos de uso
La propiedad right permite desplazar un elemento respecto a su posición original tomando como referencia el borde derecho del elemento. Por su propia definición, esta propiedad sólo afecta a los elementos cuya propiedad position tenga un valor de relative, absolute o fixed.
El siguiente ejemplo muestra tres cajas idénticas posicionadas de forma relativa (position: relative) y que sólo se diferencian en el valor de su propiedad right:
right: 20px;
}
right: 0;
}
right: -20px;
}
Los valores positivos en la propiedad right hacen que la caja se mueva hacia la izquierda respecto a su posición original. En otras palabras, la propiedad right: 20px se interpreta de la siguiente manera: "mueve la caja hacia la izquierda hasta que su borde derecho quede a 20px de distancia de la posición que originalmente tenía ese borde derecho".
De la misma manera, los valores negativos en la propiedad right hacen que la caja se mueva hacia la derecha respecto a su posición original. En otras palabras, la propiedad right: -20px se interpreta de la siguiente manera: "mueve la caja hacia la derecha hasta que su borde derecho quede a 20px de distancia de la posición que originalmente tenía ese borde derecho".
Para indicar el valor de la propiedad right puedes utilizar cualquiera de las medidas definidas por CSS. En el siguiente ejemplo, los valores 20px y -20px del ejemplo anterior se han reemplazado por 2em y -2em respecticamente. Este cambio hace que la caja se mueva hacia la izquierda/derecha más o menos en función del propio tamaño de letra de esa caja:
right: 2em;
}
right: 0;
}
right: -2em;
}
Si el valor de la propiedad right se indica mediante porcentajes, su referencia es la anchura de la caja que contiene a la caja que quieres mover, es decir, su caja padre. Por lo tanto, la propiedad right: 50% desplazaría la caja hacia la izquierda una distancia igual a la mitad de la anchura de su caja padre.
En el siguiente ejemplo, como la anchura del <div> padre es de 400px y los <div> interiores se desplazan un 25%, en realidad el desplazamiento efectivo será de 100px (el 25% de 400px):
right: 25%;
}
right: 0;
}
right: -25%;
}
La propiedad right se puede utilizar por ejemplo para desplazar ligeramente los elementos de una lista cuando se pasa el ratón por encima:
(pasa el ratón por encima de los elementos de la lista)
- Lorem ipsum dolor sit amet
- Consectetuer adipiscing elit
- Fusce ut leo eu ipsum faucibus pretium
- Donec iaculis lorem eleifend
El código CSS utilizado en el ejemplo anterior es tan sencillo como:
a:hover {
position: relative;
right: -5px;
}Si el elemento que se quiere desplazar con la propiedad right está posicionado de forma absoluta (position: absolute), la interpretación del valor de la propiedad right es muy diferente. En este caso, el origen de coordenadas es el borde derecho de la caja que hace de referencia del posicionamiento absoluto, es decir, el borde derecho de la caja padre.
Por otra parte, cuando el elemento que se desplaza está posicionado de forma absoluta, los valores de la propiedad right indicados mediante porcentajes se interpretan de la misma manera que en los elementos posicionados de forma relativa. Por tanto, si la caja padre tiene una anchura de 300px y el desplazamiento es del 10%, en realidad la caja se está desplazando 30px.