In codice HTML, gli elementi DIV creano distinte sezioni di contenuto in una pagina Web. Gli sviluppatori utilizzano DIVs in vari modi, a volte si nascondono o sovrapposizione contenuto fino a quando si verifica una determinata azione, ad esempio l'utente fa clic su un link. È possibile utilizzare una combinazione di HTML e Cascading Style Sheets (CSS) per creare gli elementi DIV e poi mettere uno dietro l'altro, grazie a una proprietà CSS chiamata "z-index." Come si imposta la proprietà di "posizione" di ogni DIV nel codice CSS, è possibile quindi aggiungere un valore di "z-index" per impilare i div dietro uno altro.
Istruzioni
1
Scrivere codice HTML per un elemento DIV e mettere il contenuto desiderato all'interno di < div > di apertura e chiusura < / div > Tag. Assegnare al DIV un attributo ID per denominare l'elemento DIV. Si dovrebbe scegliere un nome univoco da qualsiasi altro elemento DIV e non utilizzare lo stesso ID più volte sulla stessa pagina Web. Ecco un esempio:
< div id = "firstdiv" > contenuto va qui... < / div >
2
Creare un secondo DIV sotto il primo e quindi aggiungere qualsiasi contenuto si desidera che danno DIV. questo DIV un attributo ID con un nome diverso rispetto al primo.
< div id = "seconddiv" > contenuto va qui... < / div >
3
Aprire il tuo file CSS o individuare i tag < style > tra i tag < head > nel file HTML che si esegue la codifica. Se non sono già presenti, è possibile aggiungere tag < style >. Utilizzare il codice CSS per dare ogni DIV un tipo di posizione di «relativa», come mostrato in questo esempio:
firstdiv {posizione: relativo;} seconddiv {posizione: relativo;} 4
Aggiungere la proprietà "z-index" per il codice CSS per ogni elemento DIV. Impostare il valore di "z-index" superiore per il DIV che impila sopra l'altro. Il DIV più basso nello stack ottiene il più basso valore di "z-index".
firstdiv {posizione: parente; z-indice: 2;} seconddiv {posizione: parente; z-indice: 1;}
È possibile impostare il valore di "z-index" compreso tra 0 e 999. È possibile utilizzare valori negativi ma può causare problemi nel layout complessi e non funzionano nelle versioni precedenti di Internet Explorer.
Consigli & Avvertenze
- Eseguire sempre il backup i file HTML e CSS originali prima di modificarli.