Nwlapcug.com


Come fare un DIV dietro l'altro in HTML

Come fare un DIV dietro l'altro in HTML


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.