CSS Lager Position
Mer CSS som introducerades med version CSS2
Absolut och relativ placering
Vi ska framför allt introducera absolut och relativ placering. Vi menar då att vi ska placera vissa html element på en viss plats på sidan räknat från övre vänstra hörnet på vår webbsida. Relativt räknar vi från där html elementet skulle hamna om vi inte hade gjort någin positionering.
Lager, som i stimallen kallas för z-index
Ännu en använbar egenskap är lager, som i stimallen kallas för z-index. Z-index talar om hur långt upp från webbsidan (dvs mot näsan) som det här lagret finns. Det vill säga ju högre z-index värde desto närmare näsan. Z-index kan ha både positiva och negativa värden. Webbsidan har z-index värdet 0 (noll).
Vi introducerar även identifierare (t ex #minSpecialRuta) som påminner om klasser
Vi introducerar även identifierare (t ex #minSpecialRuta) som påminner om klasser, men dessa inställningar ska bara användas på ett ställe i vår webbsida.
De element som ska använda denna inställning använder egenskapen id ( t ex id="bokstav_1") istället för klass ( t ex class="bokstav_1"). Det går att använda båda egenskaperna i en html tagg för få till de inställningar vi vill ha.
Här kommer ett exempel::
<!doctype html>
<html>
<head>
<title>css-positionering-lager</title>
<meta charset="utf-8">
<link href="pos_and_layer.css" rel="stylesheet">
</head>
<body>
<h1 id="idLetter1">P</h1>
<h1 id="idLetter2">E</h1>
<h1 id="idLetter3">R</h1>
<h1 id="idLetter4">P</h1>
<h1 id="idLetter5">E</h1>
<h1 id="idLetter6">R</h1>
Här kommer lite text där <span id="idRel">relativ</span> placering används på ordet relativ, medan bilden och båda PER har absolut placering.
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="fl">Och med "layer"(skikt med z-index) kan vi styra skikten</div>
<h1>H<span class="exp">2</span>O</h1>
<div class="yta">Här kommer text som kommer att visas i en liten färgad ruta och om texten inte får plats så dyker scrollar upp</div>
<img class="x" src="bilder/map_reading.jpg" alt="mapreading" />
</body>
I stilmallen skriver vi klasser som ska ligga i en viss tagg. "img .x" till exempel som betyder att alla img-taggar som ropar på klassen "x" ska få dessa inställningar. Vi skulle kunna ha ytterliggare klasser som heter "x" som har andra restriktioner beroende på hur vi skriver i stilmallen.
Som vi ser så hittar vi även en pseudo-element, first-letter. "div .fl::first-letter" betyder att för alla div-taggar som ropar på klassen "fl" så ska första bokstaven få de kommande inställningarna ( i vårt fall, 3 gånger den aktuella textstorleken, en viss textfärg och en viss bakgrundsfärg
).
/* pos_and_layer.css */
body{ font-family:Calibri, Arial, sans-serif; font-weight:bold; }
h1 { font-family:Verdana, Arial, sans-serif; font-size:100px; font-weight:bold; }
#idLetter1 { position:absolute; top:50px; left:200px; color:blue; }
#idLetter2 { position:absolute; top:50px; left:250px; color:red; }
#idLetter3 { position:absolute; top:50px; left:300px; color:green; }
#idRel { position:relative; top:2em; left:30px; color:red; }
.exp { position:relative; top:-1em; font-size:0.5em; color:red; }
#idLetter4 { position:absolute; top:200px; left:400px; color:blue;
background-color:black; z-index:1; }
#idLetter5 { position:absolute; top:200px; left:450px; color:red; z-index:3; }
#idLetter6 { position:absolute; top:220px; left:480px; color:green;
background-color:blue; z-index:2; }
div .fl::first-letter { color: #3333FF; font-size:3em; background-color:#FF3333 }
div .yta { background-color:#00FFFF; width:150px; height:100px; overflow: scroll }
img .x { position:absolute; left:0; top:0; z-index:-1 }
Skapa nytt koordinatsystem!
Ibland vill vi styra en bild inuti en div-ruta, då kan vi enkelt se till att div-rutan övre vänstra hörn blir ett nytt origo. I stilmallen skriver vi "position:relative" men anger inga värden för top och left eller så sätter man dom till 0.
Webbläsaren skapar ett nytt origo för barnelement.
yyyyyy
width:300px;
margin:auto;
position:relative;
height:300px;
background-color:coral;
}
div.abs {
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-color:beige
}
======================
<div class="rel">
<p>yyyyyy</p>
<div class="abs">AAA</div>
</div>
Källor
HTML5 & CSS3 FOR THE REAL WORLD, Goldstein, Lazaris, Weyl (Sitepoint 2011)
w3schools, pseudoelement, pseudoklasser (http://www.w3schools.com/css/css_pseudo_classes.asp , 150930)
Filmer
XHTML and CSS Tutorial - 29 - div (thenewboston 6 min)
XHTML and CSS Tutorial - 31 - ID's (thenewboston 7 min)
XHTML and CSS Tutorial - 32 - Child Selectors (thenewboston 6 min)
XHTML and CSS Tutorial - 33 - Pseudo Elements (thenewboston 3 min)
XHTML and CSS Tutorial - 34 - External Style Sheets (thenewboston 8 min)
Kommentar: I HTML5 hoppar vi över type-egenskapen i link-taggen.
XHTML and CSS Tutorial - 35 - Overriding Styles (thenewboston 5 min)
XHTML and CSS Tutorial - 36 - Absolute Positioning (thenewboston 7 min)
XHTML and CSS Tutorial - 37 - Relative Positioning (thenewboston 6 min)
XHTML and CSS Tutorial - 38 - Fixed Positioning (thenewboston 6 min)