Hvordan lage en Div Under annen

February 28

Du kan lage noen imponerende effekter for nettstedet ditt ved hjelp av bare noen få CSS egenskaper og DIV beholdere. DIV beholdere brukes til stilling, stil og ellers manipulere nettside innhold. Sammen med mer vanlige effekter som horisontale menyer og tekst effekter, kan du også plassere en DIV container under en annen DIV container. Det fungerer ved å gjøre den første DIV overlapper den andre ved hjelp av en negativ verdi for "toppen" eller "venstre" tilhører den andre DIV. Rekkefølgen for stabling er definert ved "z-indeks" egenskap.

Bruksanvisning

1 Åpne et dokument nettside i et HTML- eller tekstredigeringsprogram. Å åpne dokumentet websiden i Windows standard tekstredigeringsprogram, høyreklikke på filen og klikk "Åpne med." Klikk for å velge "Notisblokk" eller "WordPad", deretter "OK".

2 Klikk for å plassere markøren mellom "<body>" og "</ body>" koder.

3 Type "<div style =" position: relative; z-index: 1; '> "for å lage den første DIV beholder med" posisjon "eiendommen er satt til" slektning "og" z-index "satt til" 1 " Den DIV container med høyest "z-index" eiendommen vil vises på toppen. Trykk enter."

4 Skriv eller lim inn innhold som du vil skal vises i den første DIV container, skriv "</ div>" for å lukke den første DIV tag.

5 Type "<div style =" position: relative; top: -50, left: 0; z-index: 2; '> "for å lage andre DIV beholder. Den "posisjon" eiendommen er satt til "slektning", (det samme som den første DIV container) mens "top" eiendom er satt til "-50", som vil føre til at andre DIV beholder å overlappe den første. Den "venstre" eiendom er satt til "0", som betyr at den venstre kanten av det andre DIV vil justere med den venstre kanten av det første DIV. Den "z-index" eiendom er satt til "2", som betyr at den andre DIV vil vises på toppen av den første DIV container.

6 Skriv eller lim inn innhold som du vil skal vises i den andre DIV container, skriv "</ div>" for å lukke andre DIV tag.

7 Rediger "topp" og "venstre" egenskaper i trinn 5 for å endre plasseringen av den andre DIV container over det første DIV container.

8 Klikk på "File" -menyen og klikk "Lagre".