Proprietà CSS position

Definizione e uso

L'attributo 'position' definisce il tipo di posizionamento dell'elemento.

Spiegazione

Questa proprietà definisce il meccanismo di posizionamento utilizzato per costruire la layout dell'elemento. Tutti gli elementi possono essere posizionati, ma gli elementi assoluti o fissi generano un blocco, indipendentemente dal tipo dell'elemento stesso. Gli elementi con posizionamento relativo si spostano rispetto alla loro posizione predefinita nel flusso normale.

Vedi anche:

Corso CSS:Posizionamento CSS

Manuale HTML DOM:Attributo position

Esempio

Posizionare l'elemento h2:

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

Prova tu stesso

Sintassi CSS

position: static|absolute|fixed|relative|sticky|initial|inherit;

Valore dell'attributo

Valore Descrizione
absolute

Genera un elemento con posizionamento assoluto, posizionato rispetto al primo elemento genitore diverso da static.

La posizione dell'elemento è definita dagli attributi "left", "top", "right" e "bottom".
fixed

Genera un elemento con posizionamento assoluto, posizionato rispetto alla finestra del browser.

La posizione dell'elemento è definita dagli attributi "left", "top", "right" e "bottom".
relative

Genera un elemento con posizionamento relativo, posizionato rispetto alla sua posizione normale.

Pertanto, "left:20" aggiunge 20 pixel alla posizione LEFT dell'elemento.
static Valore predefinito. Senza posizionamento, l'elemento appare nel flusso normale (ignora le dichiarazioni top, bottom, left, right o z-index).
inherit Deve essere definito il valore dell'attributo position dall'elemento genitore.

Dettagli tecnici

Valore predefinito: static
Ereditarietà: no
Versione: CSS2
Sintassi JavaScript: object.style.position="absolute"

Esempio TIY

Posizionamento: posizionamento relativo
Questo esempio dimostra come posizionare un elemento rispetto alla sua posizione normale.
Posizionamento: posizionamento assoluto
Questo esempio dimostra come posizionare un elemento utilizzando valori assoluti.
Posizionamento: posizionamento fisso
Questo esempio dimostra come posizionare un elemento rispetto alla finestra del browser.
Impostare la forma dell'elemento
Questo esempio dimostra come impostare la forma di un elemento. Questo elemento è tagliato alla forma specificata e visualizzato.
Z-index
Z-index può essere utilizzato per posizionare un elemento dopo un altro.
Z-index
L'elemento nell'esempio sopra ha cambiato il valore di Z-index.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Chrome IE / Edge Firefox Safari Opera
1.0 7.0 1.0 1.0 4.0