Proprietà position

La proprietà position definisce il metodo di posizionamento degli elementi. Questa proprietà viene molto spesso utilizzata insieme alle proprietà top, right, bottom, left, che impostano rispettivamente i margini superiore, destro, inferiore e sinistro.

Sintassi

selettore {
	position: absolute | relative | fixed | static | sticky;
}

Valori per position

Valore	Descrizione
`absolute`	Posizionamento assoluto. L'elemento viene rimosso dal flusso normale del documento e posizionato rispetto all'antenato posizionato più vicino (se presente) o rispetto alla finestra del browser.
`relative`	Posizionamento relativo. L'elemento viene spostato rispetto alla sua posizione normale nel flusso del documento, ma lo spazio che occupava rimane riservato.
`fixed`	Posizionamento fisso. L'elemento viene rimosso dal flusso normale del documento e posizionato rispetto alla finestra del browser. Rimane fermo durante lo scorrimento della pagina.
`static`	Posizionamento statico. Il valore indica l'assenza di posizionamento e l'elemento si comporta normalmente.
`sticky`	Posizionamento adesivo (sticky). L'elemento si comporta come `relative`, finché non raggiunge la posizione specificata durante lo scorrimento, dopo di che si fissa nel punto indicato (come `fixed`).

Valore predefinito: static.

Esempio . Posizionamento assoluto

Posizioniamo un elemento nell'angolo in alto a sinistra dello schermo con piccoli margini:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Esempio . Posizionamento assoluto

Ora posizioniamo un elemento nell'angolo in alto a destra dello schermo con piccoli margini:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Esempio . Posizionamento fisso

Con il posizionamento fisso, l'elemento rimarrà fermo durante lo scorrimento:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Esempio . Posizionamento relativo

Con il posizionamento relativo, l'elemento viene spostato rispetto alla sua posizione normale, ma gli altri elementi si comportano come se l'elemento non fosse stato spostato:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Esempio . Annidamento

Se il genitore ha la proprietà position impostata su relative, allora gli elementi posizionati assolutamente si posizioneranno rispetto al genitore:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esempio . Annidamento

Se il genitore ha la proprietà position impostata su absolute, allora gli elementi posizionati assolutamente si posizioneranno rispetto al genitore:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esempio . Posizionamento adesivo (sticky)

Se per un elemento la proprietà position è impostata su sticky, allora l'elemento si comporta come relative, finché non raggiunge la posizione specificata durante lo scorrimento, dopo di che si fissa nel punto. Creiamo un header sticky:

<h1>Intestazione Principale del Sito</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Esempio . Senza posizione

Se a un elemento viene assegnato un posizionamento assoluto senza specificare la posizione, l'elemento rimarrà nel punto in cui si trovava senza posizionamento, ma gli altri elementi smetteranno di notarlo:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esempio . Un asse

Con il posizionamento assoluto è possibile specificare la posizione solo lungo un asse. Ad esempio, se impostiamo la proprietà top, verticalmente l'elemento andrà nella posizione specificata, mentre orizzontalmente rimarrà dov'era:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Esempio . Tutte le posizioni

Con il posizionamento assoluto è possibile specificare le posizioni da tutti i lati, senza impostare larghezza e altezza. In questo caso l'elemento si posizionerà al centro del blocco genitore:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Vedi anche

la proprietà z-index,
che imposta la sovrapposizione degli elementi