CSS posisjonering

Denne uken har jeg vært instruktør på Dreamweaver grunnkurs, et kurs hvor vi blant annet gjennomgår det grunnleggende rundt CSS. Dette omfatter formatering generelt og produksjon av sidelayout, for å nevne noe.

Et av spørsmålene som ofte kommer opp når vi utvikler en website med div-tagger og CSS er hvordan man kan «bryte» ut av rammene for å lage mer spennende sider. Når jeg sier «bryte» ut av rammene så mener jeg det bokstavlig. Hvordan kan vi plassere elementer som overlapper andre elementer på siden, for eksempel et bilde som overlapper rammen på siden slik som vist nedenfor?

absolutt-posisjonering

Absolute posisjonering

Løsningen er CSS og absolutt posisjonering. I CSS har vi fire posisjoneringsteknikker:

  • static – elementets faktiske posisjon i dokumentet.
  • relative – elementets posisjon relatert til statisk posisjon. For eksempel kan vi sette posisjon til relative og velge å plassere det 10px fra toppen og 10px fra venstre, dette da i forhold til statisk posisjon.
    Merk: et element satt til relative posisjon uten verdier vil beholde sin statiske posisjon men allikevel regnes som posisjonert.
  • absolute – fast plassering i vinduet. Dette valget lar oss plassere et element på et bestemt fast sted i vinduet.
  • fixed – samme som absolute, men følger vinduet ved scrolling.

For å oppnå lignende effekt som i bildet over trenger vi altså å sette posisjoneringen på bildet til absolute. Et absolute posisjonert element plasseres alltid i forhold til nærmeste posisjonerte element, det betyr at om du ønsker å plassere bildet over i forhold til din hovedcontainer så må posisjonen på denne settes til relative. Et element har som standard en statisk posisjon, men dette regnes ikke som posisjonert. Derfor må vi sette container til relative slik at denne er posisjonert (selv om vi ikke definerer noen verdier for å plassere den annerledes enn statisk posisjon). Bildet, som vi i dette tilfellet har plassert innenfor container, vil da plasseres i forhold til container istedenfor body og vi oppnår full kontroll på plasseringen, uansett skjermoppløsning.

Lær mer om CSS og posisjonering på våre Dreamweaver-kurs.

Del denne artikkelen:

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *