guida online html5 & css3

I livelli nell'HTML

Il flusso degli elementi nel markup e la loro rappresentazione

Quando il browser incontra nel codice HTML un elemento, lo visualizza nell'esatta sequenza in cui si trova rispetto agli altri elementi che nel markup lo precedono, seguono o affiancano. Se l'elemento è selezionato da uno o più selettori CSS, le proprietà visive di default (quello dello user agent) ne risultano modificate. Una delle proprietà più importanti è "position". La proprietà position indica quale posizione assume un elemento rispetto al flusso del markup. Il valore di default della proprietà position è settato su static.

position: static

Un elemento static non è influenzato dalle proprietà top, right, bottom, ..., e viene sempre visualizzato nella sua posizione naturale rispetto al flusso del markup.

position: fixed

L'elemento che riceve "position: fixed" viene "sottratto" al flusso degli elementi statici del documento ed assume una posizione le cui coordinate sono relative al viewport (l'area utile della finestra del browser), non scrolla insieme agli elementi statici, ai quali si sovrappone.

Rientrano in questa categoria: le barre di navigazione fissa (sticky in alto o in basso), le finestre "modali" (sovrapposte all'intera pagina), il pulsante "scrollTop", i social widget, ecc.

È preferibile piazzare questi elementi nel markup al di fuori di qualsiasi altro elemento static, ad esempio all'inizio o alla fine del tag body.

Quando scegliamo questo valore, l'elemento perde le sue dimensioni di default (ad esempio, normalmente un div ha un display block con il quale occupa il 100% dell'elemento che lo contiene) ed assume una larghezza ed un'altezza pari alla grandezza dei suoi contenuti. Inoltre, dato che il suo posizionamento è relativo al viewport, occorre indicarne le proprietà che ne determinano le coordinate di posizione (posizione x e posizione y rispetto all'angolo superiore sinistro di coordinate left:0 e top:0).

position: relative

Un elemento con position relative, può essere "translato" rispetto alla sua posizione statica, mediante le proprietà top, right, bottom, left. Gli elementi che seguono, precedono, si affiancano restano nella loro posizione e non vanno a "riempire" lo spazio eventualmente lasciato vuoto dalla translazione.

Un elemento relative è in grado di accettare al suo interno uno o più elementi con position absolute che ne assumono le coordinate.

position: absolute

L'elemento absolute assume le cooordinate dell'elemento genitore avente position relative, absolute o fixed. Se l'elemento non è nidificato all'interno di un elmento fixed, relative o absolute, assume le coordinate di body. L'ordine di sovrapposizione viene ricreato singolarmente per ciascun elemento relative o absolute. Per il resto vale quanto detto per fixed: assume le dimensioni del suo contenuto, rispetta lo z-index, occorre sempre descriverne le coordinate.

La proprietà z-index

Quando più di un elemnto è posizionato con relative, absolute o fixed, il browser assegna automaticamente un ordine di sovrapposizione: il primo elemento è sopra la pagina ma sotto gli altri elementi fixed o absolute dichiarati successivamente. La proprietà z-index conente di stabilire arbitrariamente quest'ordine. Si parte da z-index 1 (che sarà l'elemento più in basso di tutti gli altri elementi) e si procede all'infinito.

Uno z-index negativo pone l'elemento sotto il piano dell'elemento contenitore.

Coppia di vasi inutili

Belli, colorati e basta

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Acquista

Inserite qui il contenuto del nuovo tag div

Coppia di vasi inutili

Belli, colorati e basta

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.

Acquista

Inserite qui il contenuto del nuovo tag div