Hvordan lage overlappende div med CSS

I CSS kan du opprette overlappende div ved å bruke "posisjon”Og“Z-indeks" egenskaper. CSS Position-egenskapen setter posisjonen til DIV eller container, mens Z-Index-egenskapen kan brukes til å definere DIV-sekvensen. I et slikt scenario er diven som har større verdi av z-indeksen plassert foran den andre.

Som et resultat av å lese denne artikkelen, vil du kunne lage overlappende div med CSS. For dette formålet vil vi først lære om "posisjon”Og“Z-indeks" egenskaper.

La oss komme i gang!

CSS “posisjon” eiendom

I HTML kan du stille inn elementene ved å bruke "posisjon”Eiendom. Et elements endelige plassering på en webside bestemmes av høyre, venstre, topp, bunn og i kombinasjon med Z-Index-egenskapene.

Syntaks

Syntaksen til posisjonsegenskapen er:

Posisjon: Verdi

I stedet for “verdi”, Kan du stille forskjellige posisjoner av elementer som absolutte, relative, faste og klissete.

CSS “Z-Index” -egenskaper

“Z-indeks”Eiendom brukes til å sette stabelrekkefølgen på elementer. Elementet som har større verdi av z-indeks plasseres foran de andre.

Syntaks

Syntaksen til Z-Index-egenskapen er som følger:

Z-indeks: Auto | Nummer

I ovennevnte syntaks, “bil”Brukes til å sette ordre i henhold til overordnede element, mens for manuell sekvens,“Antall”Settes som verdien av Z-Index-egenskapen.

La oss nå gå til det praktiske eksemplet på å lage overlappende div med CSS.

Eksempel 1: Overlappende Second Div med første

I HTML -delen vil vi opprette to div og tilordne forskjellige klassenavn som "Div1”Og“Div2”.

Html

Gå nå til CSS og følg de gitte instruksjonene:

• Angi verdien av posisjonseiendom som "Absolutt”For Place Div1 nøyaktig stedet der du vil.
• Juster høyden og bredden på Div1 som “250px”Og“300px”.
• Verdien av z-indeksen er satt som “1”.
• Angi bakgrunnsfargen på Div1 som “RGB (4, 3, 75)”.

CSS

.div1
Posisjon: Absolutt;
Høyde: 250px;
Bredde: 300px;
z-indeks: 1;
Bakgrunn: RGB (4, 3, 75);

Produksjon

Den første diven er vellykket plassert. Nå flytter vi til andre div.

Følg de gitte instruksjonene for å overlappe Div2:

• Angi verdien av posisjonsegenskaper, bredde og høyde på div2 samme som "Div1”.
• Angi verdien av z-indeksen som "2”For å plassere den foran den første diven.
• Sett en annen bakgrunnsfarge for Div2 som "RGB (0, 204, 255)”.
• Angi marginen til Div2 som "50px”Som margin-topp og margin-venstre verdi.
• Angi div2 -opaciteten som "0.7”.

CSS

.div2
Posisjon: Absolutt;
Bredde: 300px;
Høyde: 250px;
z-indeks: 3;
Bakgrunn: RGB (0, 204, 255);
Margin: 50px;
Opacitet: 0.7;

Produksjon

Div2 overlapper vellykket med div1.

Hvis du vil angi Div1 på toppen av Div Two, trenger du bare å endre verdien av Z-INDEX. La oss se et eksempel på dette.

Eksempel 2: Overlappende første div med den andre

I dette eksemplet vil vi endre verdien av Z-indeksen til begge DIV-ene. I “.Div1”Klasse av CSS -filen, angi verdien av“Z-indeks”Eiendom som“2”:

z-indeks: 2;

Etter det, i “.Div2”Klasse, sett verdien av“Z-indeks”Eiendom som“1”:

z-indeks: 1;

Som et resultat vil den første diven bli plassert foran Second Div:

Vi har samlet den enkleste metoden for å lage to overlappende div med CSS.

Konklusjon

“posisjon”Og“Z-indeks”Eiendom brukes til å lage overlappende div i CSS. Som standard er verdien av z-indeksen 1, som sier at den nyopprettede div vil bli plassert foran den eksisterende div. Du kan imidlertid spesifisere hvilken som helst verdi i henhold til dine krav for å justere overlappende sekvens. I denne artikkelen har vi tilbudt metodene for å lage overlappende div med CSS.