mai 15, 2009 Positioning
I css2 har hver boks en posisjonering i 3 dimensjoner:
- normal flow (relative positioning)
- floating
- absolute positioning (fixed positioning)
Display = none: er ikke å anbefalle, da de fleste ScreenReaders ikke leser innholdet i et slikt element!
Relative positioning
Et element med relative posisjonering, legges ut som et statisk element. Boksene med denne posisjoneringen skifter da vertikalt (according to top eller bottom property og/eller horisontalt (høyre/venstre)
Properties:
- top
- bottom
- right
- left
- with har verdien auto
(Positiv verdi vil gi en plassering inn mot sentrum, negativ verdi skyver elementet “utover”)
Siden det er kun boksen som flytter på seg når vi relativt posisjonerer et element, er ikke denne posisjoneringen nyttig når vi legger ut kolonner med innhold.
Relativ posisjonering er mest vanlig når vi trenger å bytte en boks et par pixler eller mer, eller i kombinasjon med negative marger eller floating elementer for mer komplekse design.
Absolute positioning
Et absolutt posisjonert element posisjonerer seg relativt til sitt nærmeste “stamfar”.
Element angitt som absolutt posisjonert, er fullstendig fjernet fra dokumentets “flyt”.
Elementet påvirker ikke andre elementer i det hele tatt (slik som en relativ posisjonering vil gjøre).
Elementet påvirker ikke påfølgende elementer i det hele tatt!
Elementet er posisjonert i forhold til sin “containing block”, og etablerer et nytt innholdselement (“containing block”), for sine neste “barn” og “etterkommere” der properties er satt til absolute.
Properties:
- top
- bottom
- right
- left
- with
- height
Posisjonering og størrelse kan brukes kombinert (nb: støttes ikke i IE6) .
Alternativt kan du spesifisere posisjonering av et hjørne av boksen ved å bruke top eller bottom i kombinasjon med left/right og størrelse på boksen.
Et element posisjonert med “absolute positioning” vil overlappe alle andre elementer, dersom vi ikke gjør rom for elementet på annet vis -> Feks ved å sette margins eller padding på andre elementer.
Dersom flere absolutt posisjonerte elementer opptar samme plassering, vil de bli plassert etter z-index.
Absolute posisjonering gjør det også mulig å plassere elementer utenfor “viewport”. Dette benyttes for å skjule innhold på skjerm/print, mens den fortsatt skal være synlig for screen readers.
Fixed positioning
Fixed positioning er en “subkategori” for absolute positioning.
Et element som er satt til fixed har alltid viewport som sitt “containing block”.
For en pc skjerm feks, vil et element posisjonert som fixed ikke flytte på seg dersom dokumentet scrolles i vinduet.
For “paged media” (utskrift), vil et element repeteres for hver eneste side.
http://reference.sitepoint.com/css/positioning
http://www.alistapart.com/articles/negativemargins/
- Legg igjen en kommentar
- Postet under Positioning
