Proprietà CSS position
Usa la proprietà CSS position per posizionare gli elementi nella pagina. Scopri i valori e gli esempi.
La proprietà CSS position controlla come un elemento viene posizionato nel documento e come risponde alle proprietà di offset top, right, bottom e left. È una delle proprietà più importanti per costruire elementi di interfaccia stratificati, fissi o flottanti.
Questa proprietà accetta cinque valori principali:
static— il valore predefinito; l'elemento rimane nel normale flusso del documento.relative— l'elemento mantiene il proprio spazio nel flusso ma può essere spostato con le proprietà di offset.absolute— l'elemento viene rimosso dal flusso e posizionato rispetto al suo antenato posizionato più vicino.fixed— l'elemento viene rimosso dal flusso e posizionato rispetto al viewport.sticky— l'elemento alterna trarelativeefixeddurante lo scorrimento.
Questa pagina spiega quando utilizzare ciascun valore, le regole che governano gli offset e i blocchi contenitori, e i problemi comuni che possono creare difficoltà.
Come funzionano gli offset e i blocchi contenitori
Le proprietà di offset top, right, bottom e left hanno effetto solo sugli elementi posizionati — cioè, qualsiasi elemento il cui position non è static. Su un elemento static vengono ignorati.
Il punto di riferimento per ciascun offset dipende dal valore:
relative— gli offset sono misurati dalla posizione normale dell'elemento stesso.topebottomlo spostano verticalmente;lefterightlo spostano orizzontalmente. Lo spazio originariamente occupato viene preservato, quindi il contenuto circostante non si sposta.absolute— gli offset sono misurati dai bordi del blocco contenitore: l'antenato più vicino che è esso stesso posizionato (relative,absolute,fixedosticky). Se non esiste tale antenato, gli offset sono relativi al blocco contenitore iniziale (approssimativamente l'elemento<html>/ la pagina).fixed— gli offset sono misurati dal viewport, quindi l'elemento rimane fisso mentre la pagina scorre.sticky— gli offset definiscono una soglia; l'elemento si comporta comerelativefinché non si scorre oltre quella soglia, poi si fissa comefixedall'interno del suo contenitore di scorrimento.
Un errore frequente è aspettarsi che un elemento figlio
absolutesi allinei al suo genitore senza impostareposition: relative(o qualsiasi valore non statico) su quel genitore. Aggiungereposition: relativeal genitore — anche senza offset — lo trasforma nel blocco contenitore. Questo pattern "genitore relativo, figlio assoluto" è la base della maggior parte dei layout posizionati.
| Valore iniziale | static |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | Object.style.position = "sticky"; |
Sintassi
Sintassi CSS position
position: static | absolute | fixed | relative | sticky | initial | inherit;Un semplice esempio con absolute
Qui position: absolute solleva il paragrafo dal flusso e lo posiziona a 40px dal lato sinistro e 120px dall'alto della pagina (non esiste nessun antenato posizionato, quindi la pagina è il riferimento):
Esempio di codice CSS position
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
position: absolute;
left: 40px;
top: 120px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Risultato
Esempio della proprietà position con tutti i valori:
Esempio CSS position con tutti i valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#box1 {
position: static;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box2 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box3 {
position: relative;
border: 2px solid #666;
width: 300px;
height: 100px;
}
#box4 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box5 {
position: absolute;
border: 2px solid #666;
width: 320px;
height: 100px;
top: 750px;
right: 25px;
}
#box6 {
position: absolute;
border: 2px solid #8ebf42;
top: 70px;
right: 15px;
}
#box7 {
position: fixed;
border: 2px solid #8ebf42;
background-color: #eee;
width: 300px;
height: 100px;
bottom: 0;
left: 0;
right: 0;
}
#box8 {
position: absolute;
border: 2px solid #666;
top: 70px;
right: 15px;
}
</style>
</head>
<body>
<h2>Position property example</h2>
<h3>Position: static</h3>
<p>
The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
</p>
<div id="box1">
Box1: position: static.
<div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: relative</h3>
<p>
The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
</p>
<div id="box3">
Box3: position: relative.
<div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: absolute</h3>
<p>
The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
</p>
<div id="box5">
Box5: position: absolute, top: 750px, right: 15px.
<div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
</div>
<h3>Position: fixed</h3>
<p>
The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
</p>
<div id="box7">
Box7: position: fixed, bottom: 0, left: 0, right: 0.
<div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
</div>
</body>
</html>In questo esempio, box1 (static) e box3 (relative) rimangono nel normale flusso, ma solo box3 funge da blocco contenitore per il suo figlio posizionato in modo assoluto, perché relative lo rende un antenato posizionato mentre static non lo fa. box5 e box7 vengono estratti dal flusso e posizionati rispettivamente rispetto alla pagina e al viewport.
Posizionamento sticky
Un elemento sticky scorre normalmente finché non raggiunge l'offset specificato (qui top: 1px), poi si "fissa" all'interno del suo contenitore di scorrimento. È ideale per intestazioni di tabelle, etichette di sezione e barre degli strumenti che devono rimanere visibili mentre la loro sezione è sullo schermo. Nota che il posizionamento sticky funziona solo mentre l'antenato di scorrimento dell'elemento viene scorso e l'antenato non deve avere overflow: hidden che lo ritaglia.
Esempio della proprietà position con il valore "sticky":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul {
height: 150px;
overflow: auto;
position: relative;
background-color: #cccccc;
padding: 0;
}
ul li {
list-style-type: none;
height: 30px;
padding: 10px 10px 0;
}
ul li:first-child {
position: -webkit-sticky;
position: sticky;
top: 1px;
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Example of the position property with the "sticky" value:</h2>
<ul>
<li>Sticky List Item</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
<li>List Item 5</li>
<li>List Item 6</li>
<li>List Item 7</li>
<li>List Item 8</li>
<li>List Item 9</li>
</ul>
</body>
</html>Valori
| Valore | Descrizione | Provalo |
|---|---|---|
| static | Gli elementi vengono posizionati secondo il normale flusso del documento. Questo è il valore predefinito di questa proprietà. | Provalo » |
| absolute | Gli elementi vengono rimossi dal flusso del documento e posizionati rispetto al loro elemento antenato posizionato. | Provalo » |
| fixed | Gli elementi vengono rimossi dal flusso del documento e posizionati rispetto alla finestra del browser. | Provalo » |
| relative | L'elemento viene posizionato rispetto alla sua posizione normale; le proprietà di offset lo spostano senza rimuovere il suo spazio originale. | Provalo » |
| sticky | Gli elementi vengono posizionati secondo il normale flusso del documento, e poi spostati rispetto al loro antenato di scorrimento più vicino e al blocco contenitore. | |
| initial | Imposta la proprietà al suo valore predefinito. | Provalo » |
| inherit | Eredita la proprietà dal suo elemento genitore. |
Quando usare quale valore
static— lascialo così per il contenuto normale del documento. Si imposta raramentestaticesplicitamente, solo per azzerare una regola di posizionamento.relative— per piccole correzioni visive, o, più spesso, per trasformare un elemento nel blocco contenitore per un figlioabsolutesenza rimuoverlo dal flusso.absolute— per overlay, badge, tooltip e menu a tendina che devono essere posizionati con precisione all'interno di un genitorerelative.fixed— per elementi ancorati al viewport: intestazioni fisse che non si muovono mai, pulsanti "torna su", banner cookie e modal.sticky— per intestazioni o etichette che devono scorrere con il contenuto fino a un certo punto e poi rimanere visibili.
Quando gli elementi posizionati si sovrappongono, il loro ordine in profondità è controllato dalla proprietà z-index. Il posizionamento viene spesso combinato con float, display e overflow nella costruzione di layout.