Jeg troede at når man brugte position:absolute, så ville div-elementet
pladsere sig med top og left i forhold til den container (div-element)
den var pladseret i.
Men åbenbart er det KUN i forhold til viewporten - altså
browservinduet og det forvirrer mig.
fra
http://www.w3.org/TR/CSS21/visuren.html#propdef-position har jeg
taget følgende:
absolute:
The box's position (and possibly size) is specified with the
'top', 'right', 'bottom', and 'left' properties. These properties
specify offsets with respect to the box's containing block.
og ang containing block står der her:
http://www.w3.org/TR/CSS21/visuren.html#containing-block
The phrase "a box's containing block" means "the containing block in
which the box lives," not the one it generates.
Som jeg læser det så skulle en <div> positioneret absolut sætte sig
med absolutte værdier i forhold til den <div> den er pladseret inde i.
Men sådan virker det bare ikke.
Se følgende kode. Skulle være rigtigt skulle box1 og box2 være sat
inde i box1 men det er de ikke
Hvor er det lige at jeg går galt i byen ?
mvh Thomas
PS: eksemplet er valideret og resultatet er det samme i IE, Firefox og
Opera
<?xml version="1.1" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1.1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<title>test</title>
<style type="text/css" media="screen">
body {
text-align:center;
background-color:#ffffff;
}
..box1 {
margin-left:auto;
margin-right:auto;
width:300px;
height:200px;
background-color:#999999;
}
..box2 {
position:absolute;
left:50px;
top:50px;
width:50px;
height:50px;
background-color:#ff9999;
}
..box3 {
position:absolute;
left:150px;
top:50px;
width:50px;
height:50px;
background-color:#99ff99;
}
</style>
</head>
<body>
<div class="box1">box 1
<div class="box2">box 2</div>
<div class="box3">box 3</div>
</div>
</body>
</html>