Hvordan lage en DIV bak en annen i HTML

Hvordan lage en DIV bak en annen i HTML


I HTML-koding, DIV elementer skape forskjellige deler av innhold på en webside. Utviklere bruker divs på ulike måter, noen ganger skjule eller stabling innhold til en bestemt handling oppstår, for eksempel bruker klikke på en link. Du kan bruke en kombinasjon av HTML og Cascading Style Sheets (CSS) til å lage DIV elementer og deretter sette en bak den andre, takket være en CSS egenskap kalt "z-index". Så lenge du setter "posisjon" tilhører hvert DIV i CSS-koden, kan du legge til en "z-index" verdi å stable divs bak hverandre.

Bruksanvisning

1 Skrive HTML-koden for en DIV element og plassere hva innholdet du vil innenfor åpningen <div> og avsluttende </ div> tagger. Tildele DIV et ID-attributt for å nevne DIV element. Du bør velge et navn som er unikt fra alle andre DIV element og ikke bruke samme ID mer enn en gang på samme webside. Her er et eksempel:

<Div id = "firstdiv"> Innholds går her ... </ div>

2 Lag en andre DIV under den første, og deretter legge til hva innholdet du ønsker at DIV. Gi denne div en id-attributt med et annet navn enn den første.

<Div id = "seconddiv"> Innholds går her ... </ div>

3 Åpne din CSS fil eller finne på <style> kodene mellom <head> taggene i HTML-filen du er koding. Du kan legge til <style> -kodene hvis de ikke allerede finnes. Bruk CSS-kode for å gi hver div en stilling type "slektning", som vist i dette eksemplet:

firstdiv {position: relative;} seconddiv {position: relative;}

4 Legg til "z-index" eiendom til CSS-kode for hvert DIV element. Sett verdien av "z-index" høyere for DIV som stabler oppå den andre. Den laveste DIV i bunken får den laveste "z-index" verdi.

firstdiv {position: relative; z-index: 2;} seconddiv {position: relative; z-index: 1;}

Du kan sette "z-index" verdi mellom null og 999. Du kan bruke negative verdier, men de kan forårsake problemer i komplekse oppsett og fungerer ikke i eldre versjoner av Internet Explorer.

Hint

  • Alltid sikkerhetskopiere opprinnelige HTML og CSS-filer før du redigerer dem.