Proprietà z-index

La proprietà z-index controlla l'ordine di sovrapposizione degli elementi posizionati quando sono sovrapposti l'uno sopra altro. La proprietà rapresenta un numero intero con valori positivi e negativi.

 Sovrapposizione d'elementi con la proprietà z-index

Nel flusso normale position: static elementi  sono disposti uno dopo l'altro nell'ordine in cui sono definite in un documento HTML. Per impostazione predefinita, valore della proprietà  z-index: auto;.

x y z axis

Proprietà z-index specifica l'ordine degli elementi lungo l'asse Z. Normalmente, gli elementi  con valore piu alto coprono gli elementi con un valore più basso e con valore  auto, e vengono posizionati  in primo piano.

z index property

Contesto di sovra posizionamento

Se  le  proprietà z-index e position per elementi non sono specificati esplicitamente, contesto di sovrapposizione è uguale all'ordine della loro posizione nel codice sorgente. Se per elementi non è specificato z-index, il browser visualizza gli elementi di una pagina nel seguente ordine:

a. Primo l'elemento base <html>, che contiene tutti gli elementi di una pagina web.

b. elementi di blocco che non sono flottanti ne  posizionati.

c. elementi con la proprietà float ma che non sono posizionati vengono distribuiti nell'ordine in cui appaiono nel codice sorgente.

d. elementi inline per quali  non è pacificato posizionamento (testo, immagini).

e. elementi che contengono proprietà position  nell'ordine in cui appaiono in codice. L'ultimo di loro sarà situato in primo piano.
flow normal
normal flow

<div class="main">
    <header style="height: 50px;"></header>
    <p style="float: left; width: 340px;"><img src="/ioeweb.it/images/winter-image.jpg" style="float: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    <aside style="float: left; width: 200px;"></aside>
    <article style="position: absolute; right: 40px; top: 130px; width: 160px; height: 100px;"></article>
    <footer style="height: 50px;"></footer>
</div>

Come si vede dal disegno sopra , l'elemento con position: absolute; è in prima linea, seguito dal testo, sotto di esso si trovano elementi galleggianti float: left;  gli elementi block non posizionati sono messi in background (dato che gli elementi galleggianti e posizionati vengono rimossi dal flusso sulla pagina , gli altri elementi block non posizionati li ignorano e vengono posizionati uno dopo altro andando in giu  secondo la marcatura, per questo l'elemento  <footer> si trova sotto il <header> nel nostro esempio).

video prevui

Proprietà z-index crea un nuovo contesto di sovrapposizione. Esso consente di cambiare l'ordine di sovrapposizione degli elementi posizionati. Gli elementi saranno visualizzati nella pagina nel seguente ordine (se per loro non sono specificate  le proprietà che influiscono il modo di sovrapposizione  come per esempio  opacity, filter, transform ):

1. Primo in fondo sara l'elemento base<html>, che contiene tutti gli altri elementi di una pagina web.

2. Dopo seguirano elementi posizionati con un un vlore di  z-index:negativo( z-index:-10; per esempio)

3. Puoi elementi block che  non sono ne flotanti ne posizionati.

4. Elementi con la proprietà float non posizionati, nell'ordine in cui appaiono nel codice sorgente.

5. Elementi inline non  posizionati (testo, immagini).

6. Elementi posizionati con valori z-index: 0; e z-index: auto;.

7. E in primo piano saranno posizionati elementi  con valori positivi di z-index. Piu alto valore dell'indice sposterà elemento piu in avanti verso di noi . Elementi con valori uguali di z-index verranno visualizzati in base alla loro posizione nel codice sorgente.

flow new

video prevui

Letto 654 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso