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".)

1. CSS - position
foto: miuenski

2. Boxar
foto: lightmash

3. 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

4. Placering Foto: koshyk

5. Placering
Man kan placera
element med CSS

6. Fyra egenskaper för placering
top Positivt värde på top flyttar neråt
right Positivt värde på right flyttar åt vänster
bottom Positivt värde på bottom flyttar uppåt
left Positivt värde på left flyttar åt höger

7. Till exempel så här
A top
B right
C bottom
D left
E

8. Position
foto: Julie Berlin

9. Fyra värden för position
Static
Relative
Absolute
Fixed
(inherited)

10. foto: steve-h Normalt flöde

11. position: static; = normalt flöde
A
Static
B
Boxarna kommer i den
C
ordning de finns i html-
D koden.
E

12. position: relative; = normalt flöde
A
Relative
B
C
D
Boxen flyttas i förhållande
E till sig själv

13. Boxar ur flödet vid…
A
Absolute
B
C Fixed
D
E

14. position: absolute; ur flödet
A
Absolute
B
C
D
E

15. Viktigt begrepp: positionerad
Positionerad
I förhållande till…?

16. I förhållande till webbläsarfönstret
A I ”normalfallet”, dvs. om vi säger att B ska ha:
position: absolute;
placeras den i förhållande till webbläsarfönstret.
B Här med värden för left och top.
C
D
E

17. ”Syskon, barn, föräldrar & förfäder”
body
Div id=”ett” Div id=”tva”
P P
h1 P P
class=”uno” class=”due”
Barn Syskon Förälder Förfader

18. ”Syskon, barn, föräldrar & förfäder”
body
div id=”ett” Body är förälder till div id=”ett”
h1
div id=”ett” förälder till h1 och båda p.
p class=”uno”
div id=”ett” och body är förfäder
p
div id=”tva” Body förälder till div id=”tva”
p div id=”tva” förälder till båda p.
p class=”due” div id=”tva” och body är förfäder

19. ”Normalfallet” absolut placering
body
div id=”ett”
h1
p class=”uno”
p
div id=”tva”
p
p class=”due”

20. ”Närmast positionerade förfader”
body
div id=”ett”
body
Om id=”ett” är positionerad,
div id=”ett” (dvs relative, absolute eller fixed)
och dessutom närmsta förfader,
h1 placeras class=”uno” i förhållande
p class=”uno” till den, inte webbläsaren.
p
div id=”tva”
p
p class=”due”
div id=”tva”

21. ”Med kod:”
body
div id=”ett”
body
.uno {
div id=”ett” position:absolute;
bottom: 10px
h1 right: 10px;
p class=”uno” }
p #ett {
position:relative;
div id=”tva” }
p
p class=”due”
div id=”tva”
p class=”uno”

22. ”Ett absolut placerat
Regel
element positioneras i
förhållande till närmast
positionerade förfader”
Foto: Aunt Owwee

23. Fixed
Fixed
Foto: Darwin Bell

24. 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.)

25. Det innebär!

26. En sak kvar
Z-index
Foto: mag3737

27. När man placerar
relative, absolute eller fixed
kan 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.

28. Z-index: 27
Foto: Horia Varlan

29. Det var teorin.
Nu är det bara att
praktisera!