Hvordan du bruker absolutt posisjonering for HTML5 og CSS3 programmering - dummies

La oss starte absolutt posisjoneringseventyr ved å vurdere standard layout mekanismen. Her kan du se en HTML5-side med to avsnitt på den. Du kan bruke CSS til å gi hvert avsnitt en annen farge og å angi en bestemt høyde og bredde. Plasseringen går til standard layout manager, som posisjonerer det andre (svarte) avsnittet rett under den første (blå) en.

Hvordan sette opp HTML

Koden er overraskende:

bokser. html #blueBox {bakgrunnsfarge: blå; bredde: 100px; høyde: 100px;} #blackBox {bakgrunnsfarge: svart; bredde: 100px; høyde: 100px;}

Hvis du ikke gir ytterligere veiledning, har avsnitt (som andre blokkeringselementer) en tendens til å gi vognretur før og etter seg selv, stabling ovenpå hverandre. Standard layout teknikker sikrer at ingenting overlapper ingenting.

Slik legger du til stillingsretningslinjer

Sjekk noe nytt: Avsnittene overlapper!

Denne prestasjonen oppnås gjennom noen nye CSS-attributter:

absPosition. html #blueBox {bakgrunnsfarge: blå; bredde: 100px; høyde: 100px; posisjon: absolutt; venstre: 0px; topp: 0px; margin: 0px;} #blackBox {bakgrunnsfarge: svart; bredde: 100px; høyde: 100px; posisjon: absolutt; venstre: 50px; topp: 50px; margin: 0px;}

Så hvorfor bryr du deg om boksene overlapper? Vel, du kan ikke bry deg, men den interessante delen er dette: Du kan ha mye mer presis kontroll over hvor elementene lever og hvilken størrelse de er. Du kan til og med overstyre nettleserens normale tendens til å holde elementene overlappende, noe som gir deg noen interessante alternativer.

Slik gjør du absolutt posisjoneringsarbeid

Noen nye deler av CSS tillater dette mer direkte kontroll over størrelsen og plasseringen av disse elementene. Her er CSS for en av boksene:

#blueBox {bakgrunnsfarge: blå; bredde: 100px; høyde: 100px; posisjon: absolutt; venstre: 0px; topp: 0px; margin: 0px;}

1. Sett posisjonattributtet til absolutt.

   Absolutt posisjonering kan brukes til å bestemme nøyaktig (mer eller mindre) hvor elementet vil bli plassert på skjermen:

   posisjon: absolutt;
   

2. Angi en venstre posisjon i CSS.

   Når du har bestemt deg for at et element vil ha absolutt posisjon, blir det fjernet fra den normale strømmen, så du er forpliktet til å fikse sin posisjon. Den venstre attributten bestemmer hvor den venstre kanten av elementet vil gå. Dette kan spesifiseres med noen av måleenhetene, men det måles vanligvis i piksler:

   venstre: 0px;
   

3. Angi topplassering med CSS.

   Attributtet indikerer hvor toppen av elementet vil gå. Igjen er dette vanligvis angitt i piksler:

   topp: 0px;
   

4. Bruk høyde- og breddeattributtene for å bestemme størrelsen.

   Når du spesifiserer en posisjon, vil du vanligvis også bestemme størrelsen:

   bredde: 100px; høyde: 100px;
   

5. Sett margene til 0.

   Når du bruker absolutt posisjonering, trener du ganske mye kontroll. Fordi nettlesere ikke behandler marginer identisk, er det bedre å sette marginer til 0 og kontrollere mellomrom mellom elementer manuelt:

   margin: 0px;
   

Generelt bruker du absolutt posisjonering bare på navngitte elementer, i stedet for klasser eller generelle elementtyper. For eksempel vil du ikke ha alle avsnittene på en side for å ha samme størrelse og posisjon, eller du kunne ikke se dem alle. Absolutt posisjonering virker på bare ett element om gangen.