Proprietà right

La proprietà right imposta la posizione del bordo destro dell'elemento. I valori per la proprietà possono essere scritti con le unità di misura comunemente accettate, ad esempio, in pixel, pollici, punti, percentuali. I valori impostati possono essere anche numeri negativi, in questo caso gli elementi si sovrapporranno uno sull'altro. Il conteggio delle coordinate è determinato dalla proprietà position, che di solito assume il valore relative (posizione relativa) o absolute (posizione assoluta).

Sintassi

selettore {
	right: dimensione o auto;
}

Esempio

Al passaggio del mouse sull'elemento figlio impostiamo la posizione del suo bordo destro a 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;
}

Esempio

Ora facciamo in modo che al passaggio del mouse il bordo destro dell'elemento figlio sia posizionato 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;
}

Vedi anche

la proprietà bottom,
che imposta la posizione del bordo inferiore dell'elemento
la proprietà top,
che imposta la posizione del bordo superiore dell'elemento
la proprietà left,
che imposta la posizione del bordo sinistro dell'elemento
lo pseudo-elemento ::backdrop,
che imposta la posizione dopo il primo elemento