nicht angemeldet
Hallo,
wir sitzen hier in einer html-Schulung und versuchen (inkl. Dozent) verzweifelt, den grundsätzlichen Unterschied in der Anwendung von
position:absolute;
top:Ypx;
mit position:absolute; nimmst du ein element aus dem normalen fluss der elemente ... und die eigenschaften: top, right, bottom, left beziehen sich auf die entfernung des margins des betroffenen elements zur entsprechende seite des umgebenden boxes (also achtung nicht auf dem browserfenster! auch wenn das noch von vielen browser so interprätiert wird: beispiel unten)
bzw. margin-top:Ypx;
jeder block hat mehrere areas die den inhalt des boxes umgeben. die äußerste dieser areas ist der margin.
mit margin-top; etc. definierst du die breite für den jeweiligen margin.
lekürte dazu:
http://www.w3.org/TR/REC-CSS2/box.html#box-margin-area
http://www.w3.org/TR/REC-CSS2/visuren.html
und ihre gegenseitigen Abhängigkeiten herauszufinden.
abhängigkeiten gibt da keine direkte, da diese css-eigenschaften sich voneinander unabhängig werwenden lassen.
das beispiel:
<html>
<head>
<title>Test 1</title>
<style type="text/css">
<!--
body { }
#box1 { position:absolute; top:10px; left:10px; width:150px; height:150px; z-index:1; }
#box2 { position:absolute; top:40px; left:40px; width:100px; height:100px; z-index:2; }
#box3 { position:absolute; top:80px; left:50px; width:150px; height:150px; z-index:3; }
#box4 { position:absolute; top:40px; left:20px; width:70px; height:70px; z-index:1; }
#box5 { position:absolute; top:60px; left:10px; width:80px; height:80px; z-index:2; }
#box6 { position:absolute; top:20px; left:50px; width:90px; height:90px; z-index:-1; }
-->
</style>
</head>
<body>
<div id="box1" style="background:red; border:solid 2px blue;">box1</div>
<div id="box2" style="background:blue; border:solid 2px white;">box2</div>
<div id="box3" style="background:yellow; border:solid 2px red;">box3
<div id="box4" style="background:gold; border:solid 2px green;">box4</div>
<div id="box5" style="background:lime; border:solid 2px navy;">box5</div>
<div id="box6" style="background:red; border:solid 2px blue;">box6</div>
</div>
</body>
</html>