8.1 Flusso normale
Il posizionamento degli elementi in CSS gioca un ruolo chiave nella gestione del loro layout e interazione su una pagina web. Determina come gli elementi sono disposti rispetto ad altri elementi e al loro contenitore. Vediamo come i diversi tipi di posizionamento influenzano il flusso degli elementi.
Flusso del documento e posizionamento
Gli elementi nel normale flusso del documento sono disposti uno dopo l'altro nell'ordine definito dalla marcatura HTML. Gli elementi
a blocco (come <div>, <p>, <h1>) sono disposti verticalmente,
occupando l'intera larghezza del contenitore genitore, mentre gli elementi in linea (come <span>, <a>, <em>)
sono disposti orizzontalmente, occupando solo lo spazio necessario.
Esempio:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Elemento a blocco</div>
<span class="inline">Elemento in linea</span>
<span class="inline">Elemento in linea</span>
8.2 Impatto del posizionamento sul flusso del documento
Diversi tipi di posizionamento possono modificare il flusso standard del documento. Vediamo come accade:
Posizionamento static
Il posizionamento static è il valore di default e non altera il normale flusso del documento. Gli elementi
con position: static sono disposti nell'ordine definito dalla marcatura HTML.
Impatto sul flusso:
- Gli elementi rimangono nel normale flusso
- Gli elementi sono disposti uno dopo l'altro in base al loro ordine in HTML
Posizionamento relative
Gli elementi con position: relative rimangono nel normale flusso, ma possono essere spostati rispetto alla loro posizione
normale tramite le proprietà top, right, bottom, left.
Lo spostamento non influenza la posizione degli altri elementi.
Impatto sul flusso:
- Gli elementi rimangono nel normale flusso
- Lo spostamento dell'elemento non altera la posizione degli elementi vicini
Posizionamento absolute
Gli elementi con position: absolute vengono rimossi dal normale flusso del documento e sono posizionati rispetto all'antenato
più prossimo posizionato. Se non esiste tale antenato, essi si posizionano rispetto al contenitore iniziale
(di solito è <html> o <body>).
Impatto sul flusso:
- Gli elementi vengono rimossi dal normale flusso
- Posizionati rispetto all'antenato posizionato più prossimo
- Gli altri elementi si comportano come se questi elementi non esistessero
Posizionamento fixed
Gli elementi con position: fixed vengono rimossi dal normale flusso e sono posizionati rispetto alla finestra del browser.
Rimangono fissi al loro posto durante lo scrolling della pagina.
Impatto sul flusso:
- Gli elementi vengono rimossi dal normale flusso
- Posizionati rispetto alla finestra del browser
- Rimangono al loro posto durante lo scrolling della pagina
- Gli altri elementi si comportano come se questi elementi non esistessero
Posizionamento sticky
Gli elementi con position: sticky si comportano come posizionati in modo relativo fino a quando non raggiungono
la soglia di scrolling definita, dopo di che diventano fissi.
Impatto sul flusso:
- Gli elementi rimangono nel normale flusso fino al raggiungimento della soglia di scrolling
- Dopo il raggiungimento della soglia, l'elemento si fissa e non influisce più sul normale flusso
8.3 Esempi visuali di impatto sul flusso
1. Esempio con posizionamento fisso:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Elemento fisso</div>
<div class="content">Contenuto scrollabile
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Esempio con posizionamento sticky:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Elemento sticky</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION