CSS-position

Fra Holstebro HTX Wiki
Skift til: navigering, søgning
Boksmodel.gif

CSS-position (Cascading Style Sheets position) giver dig mulighed for at placere et element på en hjemmeside. Det kan placere et element, for eksempel et billede, foran et andet billede. Elementer kan placeres i toppen, bunden, venstre og højre side. Der er i alt 4 positioneringer inden for CSS.

Positionering

Static: HTML-elementer er placeret static (statisk) som standard. Et static positioneret element er altid placeret i forhold til den normale strøm af siden.


Fixed: Et element der er placeret som fixed er positioneret relativt til browser vinduet. Den vil for eksempel ikke bevæge sig op eller ned hvis du ruller ned og op på siden. Fixed elementer kan overlappe andre elementer. Eksempel:

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}


Relative: Et relative positioneret element er placeret relativt til dens normale position. Eksempel:

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

Indholdet af et relative positioneret element kan flyttes og overlappe andre elementer, men den reserveret plads til elementet er stadig bevaret i den normale strøm.


Absolute: Et absolute positioneret element er placeret i forhold til det første overordnede element, der har en anden position end static. Hvis der ikke er sådan et element fundet, er blokken <html> Eksempel:

h2
{
position:absolute;
left:100px;
top:150px;
}

Absolute positionerede elementer er fjernet fra den normale strøm. Dokumentet og andre elementer opføre sig ligesom det absolute positionerede element ikke findes. Absolute positionerede elementer kan overlappe andre elementer.


Overlappende Elementer

Når elementer er positionerede udenfor den normale strøm, så kan de overlappe andre elementer. Z-index egenskab angiver stakkens orden af et element, altså hvilket element der skal placeres foran eller bagved de andre).

Et element kan have et positivt eller negativt z-index:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

Et element med et højere z-index er altid foran et element med et lavere z-index. Hvis 2 positionerede elementer overlapper hinanden, uden et z-index, så bliver elementet der bliver skrevet til sidst i HTML-koden, den der kommer til at stå øverst.

Kilde: http://www.w3schools.com/css/css_positioning.asp