nicht angemeldet
Welcher Unterschied zwischen top/margin-top etc,
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;
bzw. margin-top:Ypx;
und ihre gegenseitigen Abhängigkeiten herauszufinden. Es gibt immer nur einzelne Anwendungsbeispiele im Netz und in selfhtml. Wer kennt eine gute Dokumentation, in der mal grundsätzlich auf dieses Thema eingegangen wird? Oder wer kann es schön erklären?
Besten Dank!
Elya
-
Hallo,
wir sitzen hier in einer html-Schulung und versuchen (inkl. Dozent) verzweifelt, den grundsätzlichen Unterschied in der Anwendung vonposition:absolute;
top:Ypx;Diese Positionierung erfolgt vom oberen Fensterrand. Wenn erst etwas mit
absolut top:100px und anschliessend etwas mit top:50px definert wird,
ist das erste Element unter dem Zweiten (von der Höhe im Fenster gesehen).bzw. margin-top:Ypx;
Hier definiert man - soweit ich das verstehe - den Abstand zum
vorhergehenden Element. Bei dem obigen Beispiel erscheint auf dem Bild erst
das erste Element und anschliessend mit 50px Abstand das Zweite.und ihre gegenseitigen Abhängigkeiten herauszufinden. Es gibt immer nur einzelne Anwendungsbeispiele im Netz und in selfhtml. Wer kennt eine gute Dokumentation, in der mal grundsätzlich auf dieses Thema eingegangen wird? Oder wer kann es schön erklären?
Kurz: absolut-top ist der absolute Abstand vom oberen Fensterrand und
margin-top ist der Abstand zum vorherdefinierten Element (Absatz, Bild, oder ähnliches)Besten Dank!
Elya
Hoffe das hilft euch weiter.
Kirsten
-
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.htmlund 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>-
Liebe Kirsten, lieber Thomas,
vielen Dank für Eure schnellen und ausführlichen Antworten. Ist vielleicht gar nicht so kompliziert, wie es erscheint, aber gester war die Verwirrung groß.
Schöne Grüße
Elya
-