W3docs
it
Accedi

Proprietà CSS left

Come usare la proprietà CSS left per impostare la posizione sinistra di un elemento in combinazione con la proprietà position. Esempi pratici con i valori.

La proprietà left definisce l'offset orizzontale di un elemento posizionato rispetto al suo blocco contenitore. È una delle quattro proprietà di offset — insieme a right, top e bottom — che spostano un elemento rispetto alla posizione che avrebbe normalmente.

Specifica la distanza tra il bordo sinistro del margine dell'elemento e il bordo sinistro del suo blocco contenitore. Un valore positivo spinge l'elemento verso destra; un valore negativo lo sposta verso sinistra. La proprietà left ha effetto solo sugli elementi la cui position è diversa dal valore predefinito static.

Come funziona left con position

Il significato esatto di left dipende interamente da come l'elemento è posizionato, quindi quasi sempre si imposta prima position.

  • Se position è impostata su absolute o fixed, la proprietà left specifica la distanza tra il bordo sinistro dell'elemento e il bordo sinistro del suo blocco contenitore.
  • Se position è impostata su relative, la proprietà left specifica di quanto il bordo sinistro dell'elemento si sposta verso destra rispetto alla sua posizione normale.
  • Se position è impostata su sticky, la proprietà left applica un offset all'elemento rispetto al suo blocco contenitore. L'elemento si comporta come con il posizionamento relative finché non supera una soglia di scorrimento, dopodiché si comporta come con il posizionamento fixed.
  • Se position è impostata su static (il valore predefinito), la proprietà left non ha effetto.

Quando sia left che right sono impostate su un elemento con posizionamento assoluto, left prevale per le lingue da sinistra a destra (mentre right prevale nei contesti da destra a sinistra), a meno che width non sia auto — nel qual caso l'elemento si espande per soddisfare entrambi.

Valore inizialeauto
Si applica aElementi posizionati.
EreditataNo.
AnimabileSì. La posizione dell'elemento è animabile.
VersioneCSS2
Sintassi DOMObject.style.left = "50px";

Sintassi

Sintassi della proprietà CSS left

left: auto | length | initial | inherit;

Esempio della proprietà left:

Esempio della proprietà CSS left con la proprietà position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        position: absolute;
        left: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <p>Here the left property is defined as 35px.</p>
    <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" />
  </body>
</html>
Provalo tu stesso »

Risultato

CSS left Property

Esempio di utilizzo della proprietà left quando l'immagine si trova all'interno di un elemento <div>:

Esempio della proprietà CSS left con il tag img

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        position: relative;
        height: 150px;
        width: 400px;
        background-color: #ccc;
        color: #666;
        padding: 10px;
      }
      img {
        position: absolute;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div>
      <img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="CSS left property" /> This is some div element for
      <br /> which the left side is defined
      <br /> as 200px.
    </div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà left specificata con percentuali:

Esempio della proprietà CSS left con valore percentuale

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        position: absolute;
        left: 20%;
        top: 20%;
        width: 100px;
        height: 100px;
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="example">left: 20%</div>
  </body>
</html>
Provalo tu stesso »

Esempio della proprietà left con tutti i valori:

Esempio della proprietà CSS left con valori auto, px e % (percentuale)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .box1 {
        position: absolute;
        left: auto;
        width: 100px;
        height: 100px;
        background-color: #ccc;
      }
      .box2 {
        position: absolute;
        top: 190px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: #444;
        color: #fff;
      }
      .box3 {
        position: absolute;
        left: 10%;
        top: 50%;
        width: 100px;
        height: 100px;
        background-color: #666;
        color: #fff;
      }
      .box4 {
        position: absolute;
        left: 20%;
        top: 70%;
        width: 100px;
        height: 100px;
        background-color: #777;
        color: #fff;
      }
      .box5 {
        position: absolute;
        left: -20px;
        top: 90%;
        width: 100px;
        height: 100px;
        background-color: #999;
        text-align: right;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <h2>Left property example</h2>
    <div class="box1">left: auto</div>
    <div class="box2">left: 50px</div>
    <div class="box3">left: 10%</div>
    <div class="box4">left: 20%</div>
    <div class="box5">left: -20px</div>
  </body>
</html>
Provalo tu stesso »

Valori

ValoreDescrizioneProva
autoIl browser imposterà la posizione del bordo sinistro. È il valore predefinito di questa proprietà.Prova »
lengthImposta la posizione del bordo sinistro in px, cm ecc. Sono consentiti valori negativi.Prova »
%Imposta la posizione del bordo sinistro come percentuale della larghezza del blocco contenitore. Sono consentiti valori negativi.Prova »
initialImposta la proprietà al suo valore predefinito.Prova »
inheritEredita la proprietà dall'elemento padre.

Nota: sugli elementi posizionati, left definisce l'offset orizzontale rispetto al blocco contenitore. Se sia left che margin-left sono specificati, left ha la precedenza nei calcoli di posizionamento.

Quando usare left

  • Ancorare un elemento UI a un angolo. Combina position: fixed con left (e top) per mantenere un pulsante, un badge o un widget di chat fisso mentre la pagina scorre.
  • Spostare leggermente un elemento. Con position: relative, un piccolo valore di left sposta un elemento dalla sua posizione naturale senza rimuoverlo dal flusso del documento, quindi il contenuto circostante mantiene il suo spazio.
  • Overlay all'interno di un contenitore. Imposta position: relative sul wrapper e position: absolute sull'elemento figlio; left posiziona quindi il figlio rispetto al wrapper anziché all'intera pagina.

Per i layout che devono supportare più direzioni di scrittura, considera la proprietà logica inset-inline-start: segue la direzione del testo, corrispondendo automaticamente a left nelle lingue da sinistra a destra e a right in quelle da destra a sinistra.

Supporto browser

La proprietà left fa parte di CSS2 e funziona in tutti i browser moderni, incluse tutte le versioni di Chrome, Firefox, Safari, Edge e Opera.

Esercizio

Pratica
Cosa si può ottenere con la proprietà 'left' in CSS?
Cosa si può ottenere con la proprietà 'left' in CSS?
Was this page helpful?