Proprietà CSS right
Come usare la proprietà CSS right per impostare la posizione destra di un elemento. Vedi i valori della proprietà in uso e mettiti alla prova.
La proprietà CSS right imposta lo scostamento orizzontale di un elemento posizionato — quanto il suo bordo destro si trova lontano da un bordo di riferimento. Da sola non ha alcun effetto; agisce solo quando all'elemento viene assegnato un valore position diverso da quello predefinito static.
Questa pagina spiega come right si comporta con ogni schema di posizionamento, come interagisce con left e le insidie più comuni da tenere presenti.
Come funziona right
Il bordo di riferimento da cui right misura dipende interamente dal valore position dell'elemento:
absoluteofixed—rightè la distanza tra il bordo destro dell'elemento e il bordo destro del suo blocco contenitore (perabsolute, l'antenato posizionato più vicino; perfixed, il viewport).relative—rightsposta l'elemento verso sinistra rispetto alla sua posizione normale della quantità indicata, mentre lo spazio originariamente occupato viene preservato. (Il nome è controintuitivo: un valore positivo dirightallontana l'elemento dalla destra, cioè verso sinistra.)sticky—rightè la distanza dal bordo destro del contenitore di scorrimento alla quale l'elemento si "blocca" durante lo scrolling.static—rightnon ha alcun effetto.
Se position è static (il valore predefinito), right viene ignorato. Imposta prima position: relative, absolute, fixed o sticky.
right vs left
Se imposti sia left che right sullo stesso elemento, il risultato dipende da width e dalla direzione di scrittura:
- Con
width: auto, l'elemento si estende per soddisfare entrambi gli scostamenti — utile per ancorare un elemento a una distanza fissa da ciascun lato del suo contenitore. - Con una
widthfissa, i due valori creerebbero un vincolo eccessivo sul box. Nel testo da sinistra a destra,leftha la precedenza erightviene ignorato; nel testo da destra a sinistra, vinceright.
Quando hai bisogno di un solo scostamento orizzontale, imposta solo left oppure solo right e lascia l'altro su auto.
| Valore iniziale | auto |
|---|---|
| Si applica a | Elementi posizionati. |
| Ereditato | No. |
| Animabile | Sì. La posizione dell'elemento è animabile. |
| Versione | CSS2 |
| Sintassi DOM | Object.style.right = "50px"; |
Sintassi
right: auto | length | percentage | initial | inherit;Esempi
Esempio con un valore px
In questo caso l'immagine viene estratta dal flusso normale con position: absolute e ancorata a 35px dal bordo destro della pagina.
<!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>Risultato
Esempio con un valore %
Un valore percentuale viene risolto rispetto alla larghezza del blocco contenitore, quindi right: 30% mantiene lo scostamento proporzionale al ridimensionamento del contenitore.
<!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>Esempio con il valore initial
initial reimposta right al suo valore predefinito auto, lasciando che il browser posizioni il bordo destro automaticamente in base agli altri scostamenti e alle dimensioni del box.
<!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>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| auto | Imposta la posizione del bordo destro. È il valore predefinito di questa proprietà. | Provalo » |
| length | Imposta la posizione del bordo destro con px, em, rem, ecc. Sono ammessi valori negativi. | Provalo » |
| % | Imposta la posizione del bordo destro con % dell'elemento contenitore. Sono ammessi valori negativi. | Provalo » |
| initial | Imposta la proprietà al suo valore predefinito (auto), lasciando che il browser calcoli automaticamente la posizione. | Provalo » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
La proprietà right è una delle quattro proprietà di offset che lavorano insieme a position:
left— sposta il bordo sinistro dell'elemento.top— sposta il bordo superiore dell'elemento.bottom— sposta il bordo inferiore dell'elemento.