HTML consente di pezzi di una pagina web per essere visualizzato solo in loro cosiddetto "flusso normale," in cui ogni elemento viene visualizzato nella pagina immediatamente dopo l'elemento che lo precede all'interno del codice pagina. Ma con l'aggiunta di regole di Cascading Style Sheet (CSS) a una pagina HTML, singoli elementi possono essere tirati fuori il normale flusso e posizionati in qualsiasi ordine che decide l'autore. La proprietà CSS "z-index" consente agli autori di stack gli elementi selezionati, compresi i blocchi di testo, di fronte o dietro uno altro.
Istruzioni
1
Creare blocchi di testo. Elementi HTML devono essere creati prima di loro proprietà possono essere modificate tramite CSS. In questo esempio, creare tre blocchi di testo di paragrafo copiando e incollando il codice seguente nel documento HTML:
testo di livello medio < p > </p >
testo di livello inferiore di < p > </p >
testo di livello superiore < p > </p >
2
Impilare gli elementi uno sopra l'altro. La relativa proprietà di posizionamento dei CSS consente di posizionare gli elementi rispetto alla loro posizione nel flusso normale del documento. Impilare gli elementi del tre paragrafo creati nel passaggio precedente da relativamente posizionandoli, utilizzando il codice riportato di seguito:
< p stile = "Posizione: relativo" > medio livello testo </p >
< p stile = "Posizione: relativo; fondo: 30px; sinistra: 10px "> basso livello testo </p >
< p stile = "Posizione: relativo; fondo: 60px; sinistra: 20px "> Top livello testo </p >
Anche se la posizione del primo elemento paragrafo non è cambiata, è importante impostare il valore di posizione su "relativo". Solo gli elementi con una proprietà dichiarata posizione possono avere loro ordine z-indice ha cambiato.
3
Cambiare lo z-index di blocchi di testo. Aggiungere un valore della proprietà z-index per ciascuno degli elementi tre paragrafo, come illustrato di seguito:
< p stile = "Posizione: relativo; z-index: 2" > medio livello testo </p >
< p stile = "Posizione: relativo; fondo: 30px; sinistra: 10px; z-indice: 1" > basso livello testo </p >
< p stile = "Posizione: relativo; fondo: 60px; sinistra: 20px; z-indice: 3" > Top livello testo </p >
Salvare la pagina per confermare le modifiche.
4
Aprire la pagina che appena modificato nel tuo browser. valori z-index influenzano direttamente l'ordine dello stack, con elementi di valore z-index maggiori apparendo sempre prima degli elementi con i valori più bassi. In questo esempio, il blocco "Testo di livello superiore" viene visualizzato sulla parte superiore perché il relativo valore di z-indice di 3 è più alto. Il blocco "Medio livello testo" viene fornito dietro di esso, mentre il blocco di "Basso livello testo" viene visualizzato come il livello più basso a causa del relativo valore di z-indice di 1.