DerEineDa
Lieutenant
- Registriert
- Juni 2003
- Beiträge
- 1.002
Moin,
so eben hatte ich auf einer meiner Seiten ein seltsames Problem, was durch einen aufgelieferten Werbebanner entstand. Nach längerer Untersuchung mit Firebug konnte ich das Problem lokalisieren: Ein Div mit margin-top in einem Div mit "position: relative" verschiebt das äußere Div!
Nach längerem Googlen (wahrscheinlich mit den falschen Suchbegriffen) konnte ich für dieses Verhalten keine Erklärung finden. Ich habe hier mal etwas HTML-Code, um das Problem zu verdeutlichen:
Der Hintergrund ist also rot. Da drin ist ein Div mit position: relative mit grünem Hintergrund. Dieses Div alleine müsste ja so ziemlich an der oberen linken Ecke anliegen, was es alleine auch tut.
Nun habe ich jedoch ein Div in dem anderen Div, mit blauem Hintergrund. Die Position dieses inneren Divs verschiebe ich dann durch margin-top und margin-left. margin-left verhält sich wie erwartet: Das innere Div verschiebt sich in dem äußeren Div. "margin-top" macht aber was seltsames: Das innere Div klebt immernoch am oberen Anfang des äußeren Divs, zieht dieses aber dafür 100 Pixel nach unten.
Hab das mal als Bild angehangen (verkleinert).
Frage: Wieso passiert das? Wieso beeinflusst das margin-top des inneren Divs die Position des Äußeren? Wieso passiert das mit margin-left nicht?
so eben hatte ich auf einer meiner Seiten ein seltsames Problem, was durch einen aufgelieferten Werbebanner entstand. Nach längerer Untersuchung mit Firebug konnte ich das Problem lokalisieren: Ein Div mit margin-top in einem Div mit "position: relative" verschiebt das äußere Div!
Nach längerem Googlen (wahrscheinlich mit den falschen Suchbegriffen) konnte ich für dieses Verhalten keine Erklärung finden. Ich habe hier mal etwas HTML-Code, um das Problem zu verdeutlichen:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>div test</title>
<style type="text/css">
body {
background: red;
}
#div1 {
position: relative;
width: 400px;
height: 400px;
background: green;
}
#div2 {
margin-top: 100px;
margin-left: 100px;
width: 150px;
height: 150px;
background: blue;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>Der Hintergrund ist also rot. Da drin ist ein Div mit position: relative mit grünem Hintergrund. Dieses Div alleine müsste ja so ziemlich an der oberen linken Ecke anliegen, was es alleine auch tut.
Nun habe ich jedoch ein Div in dem anderen Div, mit blauem Hintergrund. Die Position dieses inneren Divs verschiebe ich dann durch margin-top und margin-left. margin-left verhält sich wie erwartet: Das innere Div verschiebt sich in dem äußeren Div. "margin-top" macht aber was seltsames: Das innere Div klebt immernoch am oberen Anfang des äußeren Divs, zieht dieses aber dafür 100 Pixel nach unten.
Hab das mal als Bild angehangen (verkleinert).
Frage: Wieso passiert das? Wieso beeinflusst das margin-top des inneren Divs die Position des Äußeren? Wieso passiert das mit margin-left nicht?
