css position
DESCRIPTION
Slide-varianten av en film som finns att se här: (En genomgång av hur man placerar boxar med hjälp av CSS. En genomgång av de olika egenskaperna för att placera (top, right, bottom, left), de olika positionerna: static, relative, absolute och fixed. Z-index förklaras, samt begreppet "närmast positionerade förfader".)TRANSCRIPT
foto: miuenski
CSS - position
Boxarfoto: lightmash
Boxar
När webbläsare med hjälp av CSS ritar upp ett html-dokument gör den det i en form av boxar. Dessa boxar ligger under och ”i varandra” i en hierarki
Det finns två huvudsakliga boxar:• Block-boxar • Inline-boxar (”text”)
Denna demo handlar om hur man placerar block-boxar
PlaceringFoto: koshyk
Placering
Man kan placera element med CSS
Fyra egenskaper för placering
top
right
bottom
left
Positivt värde på top flyttar neråt
Positivt värde på right flyttar åt vänster
Positivt värde på left flyttar åt höger
Positivt värde på bottom flyttar uppåt
Till exempel så här
A
B
C
D
E
top
right
bottom
left
Fyra värden för position
Static
Relative
Absolute
Fixed
(inherited)
foto: steve-h Normalt flöde
position: static; = normalt flöde
A
B
C
D
E
Static
Boxarna kommer i den ordning de finns i html-koden.
position: relative; = normalt flöde
A
B
C
D
E
Relative
Boxen flyttas i förhållande till sig själv
Boxar ur flödet vid…
A
C
D
E
Absolute
FixedB
position: absolute; ur flödet
A
B
C
D
E
Absolute
Viktigt begrepp: positionerad
PositioneradI förhållande till…?
I förhållande till webbläsarfönstret
A
B
C
D
E
I ”normalfallet”, dvs. om vi säger att B ska ha: position: absolute; placeras den i förhållande till webbläsarfönstret.Här med värden för left och top.
body
Div id=”ett”
h1 P class=”uno” P
Div id=”tva”
P P class=”due”
”Syskon, barn, föräldrar & förfäder”
SyskonBarn Förälder Förfader
”Syskon, barn, föräldrar & förfäder”
body
div id=”ett”
h1 p class=”uno” p
div id=”tva” p p class=”due”
Body är förälder till div id=”ett”
div id=”ett” förälder till h1 och båda p. div id=”ett” och body är förfäder
Body förälder till div id=”tva”
div id=”tva” förälder till båda p. div id=”tva” och body är förfäder
”Normalfallet” absolut placering
body
div id=”ett”
h1 p
div id=”tva” p p class=”due”
p class=”uno”
”Närmast positionerade förfader”
body
div id=”ett”
h1 p
div id=”tva” p p class=”due”
body
div id=”ett”
div id=”tva”
Om id=”ett” är positionerad,(dvs relative, absolute eller fixed)och dessutom närmsta förfader, placeras class=”uno” i förhållande till den, inte webbläsaren.p class=”uno”
body
div id=”tva”
div id=”ett”
”Med kod:”
body
div id=”ett”
h1 p class=”uno” p
div id=”tva” p p class=”due”
#ett { position:relative;}
p class=”uno”
.uno { position:absolute; bottom: 10px right: 10px;}
Foto: Aunt Owwee
”Ett absolut placerat element positioneras i förhållande till närmast positionerade förfader”
Regel
position:fixed;
är samma som position:absolute;
med en stor skillnad:
Den är alltid positionerad i förhållande till webbläsarfönstret!
(Den ligger kvar på samma plats, även om man rullar innehållet.)
Det innebär!
När man placerarrelative, absolute eller fixedkan de olika elementen komma att täcka varandra.Vilken som kommer överst beror på något som kallas stacking context.
Man kontrollerar det med egenskapen z-index. Exempel: z-index: 1;
Den fungerar mycket enkelt: Högst z-index hamnar överst.
Så här:
Z-index: 5
Z-index: 2
Z-index: 13
Z-index: 10
Z-index: 27
Z-index: 4
Foto: Horia Varlan
Det var teorin.
Nu är det bara att praktisera!