Sintassi

Significato dei valori principali:

• auto: Valore predefinito. Il browser calcola automaticamente la posizione destra.

• lunghezza: Uno spostamento specifico verso sinistra (es. right: 20px sposta l'elemento 20px dalla destra del contenitore).

• percentuale: Una distanza calcolata in base alla larghezza del contenitore padre (es. right: 10%).

• valori negativi: Sposta l’elemento verso destra (es. right: -20px;).

• inherit / initial / unset: Valori globali per ereditare, inizializzare o annullare il valore.

Esempio proprietà: right

Codice Esempio: right

CODE: CSS

1. .container {

2.   position: relative;

3.   width: 400px;

4.   height: 200px;

5.   background-color: #eee;

6.   border: 2px dashed #ccc;

7.   margin-bottom: 20px;

8. }

10. .box {

11.   position: absolute;

12.   bottom: 20px;

13.   right: 20px;

14.   width: 120px;

15.   height: 80px;

16.   background-color: #e06c75;

17.   color: white;

18.   text-align: center;

19.   line-height: 80px;

20.   border-radius: 8px;

21. }

Contenuto Esempio: right

<style>
  .right-example-container {
      position: relative;
      width: 100%;
      height: 250px;
      background-color: #ddd;
  }

  .right-example-box {
    position: absolute;
    bottom: 40px;
    right: 1000px; /* Distanza da destra */
    width: 150px;
    height: 100px;
    background-color: #e06c75;
    color: white;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
  }
</style>

<div class="right-example-container">
  <div class="right-example-box">Posizionato a destra</div>
</div>

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser