Come risultato della lettura di questo articolo, sarai in grado di creare div sovrapposti con CSS. A tal fine, in primo luogo, impareremo a conoscere il “ posizione ' e ' indice z ' proprietà.
Iniziamo!
Proprietà CSS “posizione”.
In HTML, puoi impostare la posizione degli elementi utilizzando il ' posizione ' proprietà. La posizione finale di un elemento su una pagina web è determinata dalla sua destra, sinistra, alto, basso e in combinazione con le proprietà z-index.
Sintassi
La sintassi della proprietà position è:
posizione : valore
Al posto di ' valore ”, puoi impostare diverse posizioni di elementi come assoluto, relativo, fisso e appiccicoso.
Proprietà CSS 'z-index'.
Il ' indice z ” viene utilizzata per impostare l'ordine di stack degli elementi. L'elemento che ha il valore maggiore di z-index è posto davanti agli altri.
Sintassi
La sintassi della proprietà z-index è la seguente:
indice z : auto |numeroNella sintassi sopra indicata, ' auto ” viene utilizzato per impostare l'ordine in base all'elemento genitore, mentre per la sequenza manuale, il “ numero ” è impostato come valore della proprietà z-index.
Passiamo ora all'esempio pratico di creazione di div sovrapposti con CSS.
Esempio 1: sovrapposizione del secondo div con il primo
Nella sezione HTML, creeremo due div e assegneremo diversi nomi di classe come ' div1 ' e ' div2 ”.
HTML
< corpo >< div classe = 'div1' >< / div >
< div classe = 'div2' >< / div >
< / corpo >
Ora, passa al CSS e segui le istruzioni fornite:
- Imposta il valore della proprietà position come ' assoluto ” per place div1 esattamente il posto dove vuoi.
- Regola l'altezza e la larghezza del div1 come ' 250px ' e ' 300px ”.
- Il valore dell'indice z è impostato come ' 1 ”.
- Imposta il colore di sfondo del div1 come ' RGB(4, 3, 75) ”.
CSS
.div1 {posizione : assoluto ;
altezza : 250px ;
larghezza : 300px ;
indice z : 1 ;
sfondo : rgb ( 4 , 3 , 75 ) ;
}
Produzione
Il primo div è stato posizionato correttamente. Passiamo ora alla seconda div.
Per sovrapporre il div2, segui le istruzioni fornite:
- Imposta il valore della proprietà position, della larghezza e dell'altezza del div2 come per ' div1 ”.
- Imposta il valore di z-index come ' Due ” per posizionarlo davanti alla prima div.
- Imposta un colore di sfondo diverso per il div2 come ' RGB(0, 204, 255) ”.
- Imposta il margine di div2 come ' 50px ” come valore del margine superiore e del margine sinistro.
- Imposta l'opacità di div2 come ' 0.7 ”.
CSS
.div2 {posizione : assoluto ;
larghezza : 300px ;
altezza : 250px ;
indice z : 3 ;
sfondo : rgb ( 0 , 204 , 255 ) ;
margine : 50px ;
opacità : 0.7 ;
}
Produzione
Div2 si sovrappone con successo a div1.
Se vuoi impostare div1 sopra div due, devi solo cambiare il valore di z-index. Vediamo un esempio di questo.
Esempio 2: sovrapposizione del primo div con il secondo
In questo esempio, cambieremo il valore dello z-index di entrambi i div. Nel ' .div1 ” classe del file CSS, imposta il valore di “ indice z ” proprietà come “ Due ”:
indice z : Due ;Dopodiché, nel “ .div2 ” classe, impostare il valore della “ indice z ” proprietà come “ 1 ”:
indice z : 1 ;Di conseguenza, il primo div verrà posizionato davanti al secondo div:
Abbiamo compilato il metodo più semplice per creare due div sovrapposti con CSS.
Conclusione
Il ' posizione ' e ' indice z ” viene utilizzata per creare div sovrapposti in CSS. Per impostazione predefinita, il valore di z-index è 1, il che indica che il div appena creato verrà posizionato davanti al div esistente. Tuttavia, è possibile specificare qualsiasi valore in base alle proprie esigenze per regolare la sequenza di sovrapposizione. In questo articolo abbiamo offerto i metodi per creare Div sovrapposti con CSS.