I contenitori div HTML consentono di aggiungere interessanti effetti speciali alle pagine Web del sito Web aziendale. I div, che agiscono come lastre di vetro, possono contenere altri elementi HTML come oggetti di testo. Una proprietà CSS denominata z-index determina l’ordine in cui i div vengono visualizzati quando li impili uno sopra l’altro. Modificando la proprietà z-index di un div, puoi anche cambiare l’ordine del div nello stack. Grazie a questa conoscenza, puoi fare in modo che il testo in un div appaia davanti al testo in un altro div cambiando il suo valore z-index.

1

Apri il tuo documento HTML e aggiungi il seguente codice alla sezione del documento:

Titolo uno

Intestazione due

Questo codice crea due contenitori div con valori id div1 e div2. Il contenitore div1 contiene un’intestazione che recita “Intestazione 1.” L’intestazione del secondo div diceva “Intestazione 2.” Questi due div si trovano all’interno di un div master il cui ID è “main”.

2

Aggiungi il codice mostrato di seguito dopo il codice elencato nel passaggio precedente:

Questo codice crea la funzione JavaScript changeZindex. Quella funzione accetta i quattro parametri passati dal clic del pulsante e modifica i valori z-index di div1 e div2 con i valori passati alla funzione. Poiché il clic del pulsante passa -1 come valore di div1 e 1 come valore di div2, il codice fa apparire div2 sopra div1 quando viene eseguito.

3

Incolla il seguente codice CSS nella sezione del documento:

principale {

posizione: relativa; z-index: 1; altezza: 400px; larghezza: 400 px;
colore di sfondo: blu; }

{div1

posizione: assoluta; z-index: 1; altezza: 80px; larghezza: 200 px;
position: relative;
colore di sfondo: giallo; }

{div2

z-index: -1;
posizione: assoluta;
altezza: 80px; larghezza: 200 px;
top: 20px;
sinistra: 20px;
colore di sfondo: verde;
}

Questo codice definisce l’aspetto, la posizione e gli attributi z-index per i tre div sulla pagina Web. Il selettore #main crea un grande sfondo blu su cui poggiano gli altri due div. I selettori # div1 e # div2 hanno attributi di posizione i cui valori sono “assoluti”. Ciò ti consente di posizionare quei due div nel punto desiderato all’interno del div principale. Il selettore # div1 ha un attributo background-color il cui valore è “Yellow” e il valore dell’attributo background-color del selettore # div2 è “Green”. Poiché il valore z-index del selettore # div2 è -1, si trova dietro div2, il cui valore z-index # div2 è 1. Gli elementi con valori z-index più alti appaiono sempre davanti a quelli con valori più bassi.

4

Aggiungi il codice seguente dopo il codice elencato nell’ultimo passaggio:

funzione changeZindex (div1, div2, zIndex1, zIndex2) {document.getElementById (div1) .style.zIndex = zIndex1; document.getElementById (div2) .style.zIndex = zIndex2; }

Questo codice crea la funzione JavaScript changeZindex. Quella funzione accetta i quattro parametri passati dal clic del pulsante e modifica i valori z-index di div1 e div2 con i valori passati alla funzione. Poiché il clic del pulsante supera -1 per il valore di div1 e 1 per il valore di div2, il codice fa apparire div2 sopra div1.

5

Salva il tuo documento e visualizzalo in un browser. Vedrai il div1 giallo, il cui testo è “Intestazione 1”, si trova sopra il div verde il cui testo è “Intestazione 2.” Fare clic sul pulsante per far apparire div2 sopra div1.