Jonas Filsø <Jonas@Fille-Cup.dk> writes:
>> Position:relative
> Arh#"!#! Den skal jeg lige have igen. Som sagt er jeg ny i det her css og
> vil utrolig gerne lære det.
CSS kan placere sine blokke på forskellige måder. Det bestemmes af (bl.a.)
"position"-egenskaben. Den har fire forskellige muligheder:
position: static; - Den normale opførsel. Elementet placeres hvor
det skal i det almindelige "flow" på siden. Det
er den opførsel man får hvis man ikke angiver
en anden.
position: relative; - Placeres lige som med static, og optager den
samme plads på siden. Men, derefter kan elementet
flyttes relativt til denne position med fx left:-
og top:-egenskaberne. Selv om elementet bliver
vist forskudt, så optager det stadig samme plads
på siden som for "static".
position: absolute; - Elementet tages ud af den normale "flow" for siden
(optager altså ikke nogen plads mellem det der står
før og efter). Placering med fx left: og top: er
i forhold til det nærmeste omkrandsende element
der er placeret (har position forskellig fra
static).
position: fixed; - Som for "absolute", ud over at placering er
i forhold til "viewport" på browseren (en
del af browseren hvor siden vises).
"position:fixed;" virker ikke i IE (det gamle
lort :).
Eksempel:
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Positionstest</title>
<style type="text/css">
.box1 {
width: 96px;
height: 96px;
border: 2px solid;
}
.box2 {
margin-left: 100px;
width: 200px;
height: 200px;
border: 2px solid;
}
</style>
</head>
<body>
<p> To kasser inde i en tredje: </p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red">rød 1</div>
<div class="box1" style="border-color:green">grøn 1</div>
</div>
<p> Rød kasse: <code>position:relative</code>. Den grønne kasse
er stadig placeret hvor den plejer.</p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red;
position: relative;
left: 50px;
top: 50px">rød 2</div>
<div class="box1" style="border-color:green">grøn 2</div>
</div>
<p> Rød kasse: <code>position:absolute</code>. Den grønne kasse
er nu ikke skubbet ned af den røde. Den røde er placeret
i forhold til siden (50 ned, 350 fra venstre).</p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red;
position: absolute;
left: 350px;
top: 50px">rød 3</div>
<div class="box1" style="border-color:green">grøn 3</div>
</div>
<p> Rød kasse: <code>position:absolute</code> med blå <code>relative</code>.
Den grønne kasse
er nu ikke skubbet ned af den røde. Den røde er placeret
i forhold til den blå (50 ned, 350 fra venstre).</p>
<div class="box2" style="border-color:blue; position: relative;">
<div class="box1" style="border-color:red;
position: absolute;
left: 350px;
top: 50px">rød 3</div>
<div class="box1" style="border-color:green">grøn 3</div>
</div>
<p> Rød kasse: <code>position:fixed</code>. Den grønne kasse
er nu ikke skubbet ned af den røde. Den røde er placeret
i forhold til viewport (flytter sig ikke når man scroller).</p>
<div class="box2" style="border-color:blue">
<div class="box1" style="border-color:red;
position: fixed;
left: 450px;
top: 50px">rød 5</div>
<div class="box1" style="border-color:green">grøn 5</div>
</div>
</body>
</html>
---
> Alle mine div står til position:absolute;. Hvorfor ved jeg edenligt
> ikke.
Et godt udgangspunkt for at blive klogere :)
/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:
http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'