Hvordan du skal plassere en DIV over et objekt

Hvordan du skal plassere en DIV over et objekt


Internett har blitt mediet for valget for publisering ideer og meninger, markedsføring av produkter og offentlig deg selv eller din bedrift. Men å lage et nettsted alene er ikke nok til å bli sett. For å få web-trafikk, må en nettside skiller seg ut fra de millioner av konkurrerende sider. Ved hjelp av metoder som divisjoner for å organisere og plassere objekter og informasjon i bestemte steder på siden gir deg et rent og godt utformet utseende som vil skille deg ut fra mengden.

Bruksanvisning

1 Legg en DIV tag på web-dokument ved hjelp av "<div>" tag å starte divisjon og "</ div>" for å avslutte den. All kode eller tekst i mellom start- og slutt kodene vil ligge i DIV. Divisjoner kan settes til en bestemt posisjon, slik at du kan sette inn koden på noe punkt i dokumentet.

2 Lag en stil attributt for din DIV ved å legge til "style =" til begynnelsen DIV tag etter ordet div men før slutt braketten. HTML stil attributter kan angi en posisjon, størrelse og mer til din divisjon.

3 Sett posisjon til å være absolutt ved å legge til "position: absolute;" til stilen attributtet. Bruk X og Y-koordinater i piksler til sted for å divisjonen over objekt med "topp" og "venstre" tags. For eksempel, hvis du vil at DIV å være 50 piksler fra toppen og 50 piksler fra venstre, skriv "topp: 50 piksler, venstre: 50 piksler;" etter stillingskode.

4 Legg en "z-index" attributt etter toppen og venstre koden ved å skrive "z-index: 10;" for å sikre din avdeling vises på toppen av objektet og ikke under. En høyere "z-index" vises på toppen av objekter med en lavere "z-index".

5 Legg anførselstegn like før "posisjon" og like etter semikolon av z-indeksen.

Hint

  • Hvis objektet fortsatt vises på toppen av DIV, opprette en ny DIV for objektet med en lavere z-index.
  • Den fulle kode basert på veiledningen ovenfor skal se slik ut:
  • <Div style = "position: absolute; top: 50 piksler, venstre: 50 piksler, z-index: 10;"> DIV innhold </ div>