Position CSS

La proprietà position CSS specifica il metodo utilizzato per il posizionamento di un elemento.

Rappresenta una delle proprietà dei CSS più utilizzate per gestire il posizionamento degli elementi di una pagina web.

Position CSS valori possibili

I valori possibili che si possono indicare nella proprietà position sono:

static: con questo valore gli elementi sono posizionati in maniera statica. Cioè gli elementi che hanno questo valore sono posizionati secondo il normale flusso della pagina html. Ciò vuol dire che se imposto dei valori per distanziare superiormente, inferiormente, a destra o a sinistra non verranno distanziati. Per intenderci sono le proprietà top, bottom, left, e right.

relative: gli elementi in questo caso seguono la loro posizione normale ma anche le impostazioni di top, bottom, left, e right se specificate.

fixed: gli elementi con questo valore vengono posizionati in modo che rimangano nello stesso posto anche se la finestra viene ridotta o allargata. Inoltre le proprietà top, bottom, left, e right se specificate vengono applicate agli elementi.

absolute: questo valore, della proprietà position dei CSS, consente di posizionare l’elemento non rispetto alla finestra del browser, ma rispetto all’elemento precedente più vicino. Se non ci sono elementi precedenti posizionati allora si sposta con lo scorrimento della pagina.

sticky: questa proprietà è molto utilizzata, soprattutto per gli elementi che devono stare fissi nella pagina, come ad esempio il menù di navigazione. Infatti anche se l’utente scorre la pagina verso il basso il menù rimane sempre disponibile in alto.

Position CSS esempi

Facciamo degli esempi sulla proprietà position e i possibili valori.

Iniziamo impostando il valore static per un elemento. Ecco dunque il primo esempio:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Esempio proprietà position</title>
    <style>
    .stat {
      position:static;
      border:5px solid #ccc;
      left:20px;
      width:300px;
      padding:20px;
    }
    </style>
  </head>
  <body>
    <h1>Proprietà position CSS</h1>
    <div class="stat">
      Elemento con posizione statica! Anche se ho impostato la proprietà left a 20 pixel non si discosta dal bordo sinistro!
    </div>
  </body>
</html>

Guardando l’immagine sotto, che utilizza la proprietà position dei CSS con valore static, si vede come si posiziona l’elemento nella pagina:

position

Cambiamo adesso l’esempio sopra e impostiamo la proprietà:

position: static;

lasciando tutto il resto invariato.

position relative

Come potete notare l’elemento è spostato da sinistra di 20 pixel.

In questa lezione abbiamo spiegato la proprietà position dei CSS e abbiamo fatto qualche esempio. Nelle prossime lezione faremo ancora degli esempi che utilizzano questa proprietà.

Alcuni link utili

Indice tutorial CSS3

Indice tutorial HTML

Fogli di stile interni, esterni ed in linea

Fogli di stile esterni

Selettori

Come impostare le pseudo-classi

Reset CSS

CSS responsive

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *