Propiedad right

La propiedad right establece la posición del borde derecho del elemento. Los valores para la propiedad se pueden especificar con unidades de medida comunes, por ejemplo, en píxeles, pulgadas, puntos, porcentajes. Los valores establecidos también pueden ser números negativos, en este caso los elementos se superpondrán unos a otros. El cálculo de las coordenadas está determinado por la propiedad position, que normalmente toma el valor relative (posición relativa) o absolute (posición absoluta).

Sintaxis

selector {
	right: tamaño o auto;
}

Ejemplo

Al pasar el cursor sobre el elemento hijo establezcamos la posición de su borde derecho en 25px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	right: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Ejemplo

Ahora, al pasar el cursor, que el borde derecho del elemento hijo esté posicionado a -50px:

<div id="elem">
	<p></p>
</div>

#elem {
	width: 400px;
	height: 300px;
	border: 1px solid black;
}
p {
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	margin-left: 50px;
}
p:hover {
	right: -50px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Véase también

propiedad bottom,
que establece la posición del borde inferior del elemento
propiedad top,
que establece la posición del borde superior del elemento
propiedad left,
que establece la posición del borde izquierdo del elemento
pseudoelemento ::backdrop,
que establece la posición detrás del primer elemento