Come creare div sovrapposti con CSS

In CSS, puoi creare div sovrapposti utilizzando il "posizione" E "Z-INDEX" proprietà. La proprietà di posizione CSS imposta la posizione del Div o del contenitore, mentre la proprietà Z-Index può essere utilizzata per definire la sequenza Div. In tale scenario, il div che ha il valore maggiore dell'indice z è posto davanti al secondo.

Come risultato della lettura di questo articolo, sarai in grado di creare Div sovrapposti con CSS. A tale scopo, in primo luogo, impareremo sul "posizione" E "Z-INDEX" proprietà.

Iniziamo!

Proprietà "posizione" CSS

In HTML, è possibile impostare la posizione degli elementi utilizzando il "posizione" proprietà. La posizione finale di un elemento su una pagina Web è determinata dalla sua destra, sinistra, in alto, in basso e in combinazione con le proprietà Z-indice.

Sintassi

La sintassi della proprietà di posizione è:

Posizione: valore

Al posto di "valore", È possibile impostare diverse posizioni di elementi come assoluto, relativo, fisso e appiccicoso.

Proprietà CSS "Z-Index"

IL "Z-INDEX"La proprietà viene utilizzata per impostare l'ordine degli elementi dello stack. L'elemento con il valore maggiore dell'indice z è posto davanti agli altri.

Sintassi

La sintassi della proprietà z-indice è la seguente:

Z-INDEX: Auto | Numero

Nella sintassi sopra offerta, "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-indice.

Ora, passiamo all'esempio pratico di creare div sovrapposti con CSS.

Esempio 1: Sottoperazione del secondo div con il primo

Nella sezione HTML, creeremo due div e assegneremo nomi di classe diversi come "Div1" E "Div2".

Html

Ora, spostati sul CSS e segui le istruzioni fornite:

• Imposta il valore della proprietà di posizione come "assoluto"Per il luogo Div1 esattamente il luogo in cui 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;
Z-INDEX: 1;
Background: RGB (4, 3, 75);

Produzione

Il primo div viene posizionato con successo. Ora ci spostiamo al secondo div.

Per sovrapporre il Div2, seguire le istruzioni fornite:

• Imposta il valore della proprietà di posizione, larghezza e altezza del Div2 come il "Div1".
• Impostare il valore dell'indice z come "2"Per posizionarlo davanti al primo div.
• Imposta un colore di sfondo diverso per il Div2 come "RGB (0, 204, 255)".
• Imposta il margine di Div2 come "50px"Come valore margin-top e margine-sinistra.
• Imposta l'opacità di Div2 come "0.7".

CSS

.Div2
Posizione: assoluto;
larghezza: 300px;
Altezza: 250px;
Z-INDEX: 3;
Background: RGB (0, 204, 255);
Margine: 50px;
opacità: 0.7;

Produzione

Div2 si sovrappone correttamente a Div1.

Se si desidera impostare Div1 in cima a Div Two, devi solo modificare il valore dell'indice z. Vediamo un esempio di questo.

Esempio 2: First Div sovrapposti con il secondo

In questo esempio, cambieremo il valore dell'indice z di entrambi i div. Nel ".Div1"Classe del file CSS, impostare il valore di"Z-INDEX"Proprietà come"2":

Z-INDEX: 2;

Dopo quello, nel ".Div2"Classe, imposta il valore di"Z-INDEX"Proprietà come"1":

Z-INDEX: 1;

Di conseguenza, il primo Div verrà posto di fronte al secondo div:

Abbiamo compilato il metodo più semplice per creare due div sovrapposti con CSS.

Conclusione

IL "posizione" E "Z-INDEX"La proprietà viene utilizzata per creare Div sovrapposti in CSS. Per impostazione predefinita, il valore dell'indice z è 1, che afferma che il Div appena creato verrà posizionato di fronte al Div esistente. Tuttavia, è possibile specificare qualsiasi valore in base ai requisiti per regolare la sequenza sovrapposta. In questo articolo, abbiamo offerto i metodi per la creazione di div sovrapposti con CSS.