Esempio di posizionamento fisso>
Posizionamento fisso
Un oggetto con posizionamento fisso ha come containing block la viewport.
La sezione header di questa pagina, quella di color lime, ha posizionamento fisso. Rimarrà sempre in vista sullo schermo anche in caso di scroll. Alla sua property height non è stato assegnato alcun valore.
Gli oggetti in essa contenuti sono posizionati in modo relativo. In ragione di ciò, aggiungendo altri elementi posizionati in maniera relativa l'ampiezza della fascia lime potrebbe aumentare sino ad invadere il contenitore successivo.
Anche la sezione nav in fondo allo schermo è posizionata in maniera fissa.
La presente sezione, quella nella fascia color aqua, è posizionata in modo relativo con un offset verticale tale da non coprire l'header. Questa fascia può liberamente crescere in altezza sino a richiedere scroll per essere visualizzata.
Gli oggetti in posizione fissa rimarranno comunque sempre nella stessa posizione.
Potete osservare come scrollando la fascia color acqua essa copra l'header e scompaia sotto il footer.
Sullo schermo si possono notare tre foto
La foto degli attrezzi rimane in primo piano.
Le ciliege invece sono in primo piano rispetto all'header ma in secondo piano rispetto alla fascia color acqua.
Il layer su cui giace un oggetto, anche se posizionato in maniera fissa, può essere modificato utilizzando la proprietà z-index. La foto della goletta che originariamente aveva lo stesso livello di presentazione delle ciliege è stata portata su un layer superiore impostando la property z-index a 1.
