Sintassi

Significato dei valori principali:

• auto: Valore predefinito. Il browser calcola automaticamente la posizione sinistra dell’elemento.

• lunghezza: Un valore come px, em, ecc. (es. left: 50px;) sposta l’elemento verso destra di 50px rispetto al contenitore.

• percentuale: Una percentuale rispetto alla larghezza del contenitore (es. left: 10%;).

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

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

Esempio proprietà: left

Codice Esempio: left

CODE: CSS

1. .left-example-container {

2.   position: relative;

3.   width: 100%;

4.   height: 250px;

5.   background-color: #ddd;

6.   border: 1px dashed #999;

7. }

9. .left-example-box {

10.   position: absolute;

11.   top: 40px;

12.   left: 100px; /* Sposta l’elemento verso destra */

13.   width: 150px;

14.   height: 100px;

15.   background-color: #e06c75;

16.   color: white;

17.   text-align: center;

18.   line-height: 50px;

19.   font-size: 20px;

20.   border-radius: 8px;

21. }

Contenuto Esempio: left

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

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

  <div class="left-example-container">
    <div class="left-example-box">
      Posizionato con <code>left: 100px;</code>
    </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