Positionering

I vanlig html kommer texten och bilderna att komma på den plats de blivit insatta i html koden.

CSS tillåter oss att placera in element friare på sidan.

Till vår hjälp har vi följande CSS egenskaper:

Egenskap	Förklaring	Alternativ	Gäller för
position	Gör att man kan positionera element. Om denna egenskap inte är satt kan inget av de nedanstående användas	absolute relative static	Alla element
left	Vänster position	längd procent auto	Endast för position:absolute eller position:relative
top	Top positionen för elementet	längd procent auto	Endast för position:absolute eller position:relative
height	Höjden på elementet	length auto	DIV, SPAN
width	Bredden	längd procent auto	DIV, SPAN
visibility	Synlig eller osynlig	visible hidden inherit	Alla element
z-index	Om flera element överlappar varandra bestämmer detta ordningsföljden	auto heltal	Endast för position:absolute eller position:relative
clip	Synlig yta på ett element	shape auto	Alla element
overflow	Om det är "för mycket" i ett element, hur skall det hanteras	visible hidden scroll auto	Alla element

position:absolute

Detta är den enklaste att använda så jag tar bara upp denna.

Ett absolut positionerat element följer inte dent "normala" textflödet i texten utan placeras in på en fix plats. De kan evetuellt överlappa andra element

Nedan finns ett exempel på en text som placerats in 60 pixels frän vänster och 16 pixels från toppen

<SPAN
    STYLE="position:absolute;
    top:60px;
    left:60px;
    background-color:#ADD8FF"
    >
    Text text text text text text text text text
    text text text text text text text text text
</SPAN>