CSS positionering med absolute och float css

CSS har två viktiga attributer vid positionering av element, float och absolute.
Genom att använda dessa två kan html objekt placeras på andra platser än vart de förekommer, och även placeras under och över varandra.

Float CSS positionering

Med css attributen float kan html-objekt placeras på 3 olika sätt i dokumentet, default är på den plats i dokumentet där objektets kod finns.
De två övriga platserna är till höger resp. till vänster.

• .klass { float:right; } - objekten av klassen "klass" hamnar efter höger kant i föräldrarobjektet.
• .klass { float:left; } - objekten av klassen "klass" hamnar efter vänster kant i föräldrarobjektet.
• .klass { float:; } - objektet hamnar på samma plats som koden i html-dokumentet.

CSS position

CSS egenskapen position kan ha två olika värden, relative och absolute.
Relative skapar en placering relativ till kodens placering medan absolute placerar objektet strikt på den definierade platsen, oavsett alla andra objekt så placeras objektet exakt på samma plats.

Position:absolute

Till egenskapen absolute använder man ofta CSS attributerna left och top, som refererar till avstånd från vänster kant resp. höger kant.
Man kan dock på samma sett använda right och bottom istället och referera till avståndet från dessa.

• .klass1 { position:absolute;left:25px;top:100px; } - objekten av klassen "klass1" hamnar 25px från vänster- och 100px från överkanten.
  
  
• .klass2 { position:absolute;right:25px;bottom:100px; } - objekten av klassen "klass2" hamnar 25px från höger- och 100px från underkanten.

• .klass1 { position:absolute;left:250px;top:300px;z-index:2; } - klass 1 får z-index 2.
  
  
• .klass2 { position:absolute;top:200p;top:250px;z-index:1; } - klass 2 får z-index 1.

Som illustrationen visar ger ett högre z-index en högre placering i ordningen.
Z-index är en vektor som går utåt i skärmen, ett högre värde ger alltså en placering närmare dig i högen av element.

Position:relative

Denna egenskap fungerar ungefär som absolute men sätter avstånd jämfört med den naturliga positionen istället för med webbsidans storlekar

• .klass1 { position:relative;left:25px;top:25px; } - objekten av klassen "klass" förskjuts 25px nedåt och 25px åt höger.

Slutsats - CSS Positionering:

Använd float för att styra ett objekts centrering, absolute för att sätta en en absolut position, relative för att förskuta objektet från sin naturliga plats och z-index för att sätta ordningen i en hög av objekt.


Fler CSS guider från webbdesign.info

Externa resurser:
W3C.org - CSS Positioning Properties

---

Kommentarer    Antal 0    Medelpoäng 0/10

Bli medlem för att kunna skriva kommentarer!
Logga in om du redan är medlem.