CSS-Breiten im Allgemeinen können ein wenig verwirrend sein. Absolute Breiten sind einfach. Relative Breiten können zu einem interessanten Verhalten führen. Grundsätzlich sind die prozentualen Breiten relativ zum umgebenden Element. Wenn das Elternelement eine absolute Breite hat, ist es einfach, es auszuarbeiten. Oft geht es jedoch nicht, so dass Sie in komplizierte Berechnungen einsteigen können, wie ein Browser berechnet, wie viel Platz er benötigt. Wenn alle seine Kinder eine prozentuale Breite haben, wird es oft weniger Breite haben, als der Designer normalerweise beabsichtigt.
Also, wenn Sie margin-left: -100% sehen, bedeutet das grundsätzlich, dieses Element außerhalb seines Elternteils nach links zu verschieben, die gesamte Breite des Elternteils. Eine Konsequenz von negativen Margen (insbesondere) ist, dass der Raum, in den sie sich häufig bewegen, nicht dafür sorgt, dass sie da sind, und Sie müssen dies bei der Planung des Layouts berücksichtigen.
Ein weiterer guter Tipp ist, dass, wenn Sie diese Situation haben:
<div id="outer">
Outer
<div id="inner">Inner</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#inner { width: 50px; margin-left: -100px; }
<style>
es nicht wirklich funktionieren. Oder besser gesagt, es funktioniert auf (iirc) Firefox, aber nicht auf IE (irgendeine Version). Wenn Sie so etwas tun möchten, müssen Sie ein containing-Element verwenden.
<div id="outer">
Outer
<div id="wrap">
<div id="inner">Inner</div>
</div>
</div>
<style type="text/css">
#outer { width: 100px; }
#wrap { width: 100px; margin-left: -100px; }
#inner { width: 50px; }
<style>
und das wird viel browserkompatibler sein.
Hier ist ein vollständiges Beispiel, die negative Margen zeigt (auf FF, Chrome und IE8 überprüft):
entfernt tot Images Link
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Negative Margins</title>
<style type="text/css">
html, body, div { margin: 0; padding: 0; }
body { background: #A7A37E; }
#outer { width: 800px; background: #E6E2AF; margin: 0 auto; padding: 15px 0; }
#wrap { width: 500px; background: #EFECCA; margin: 0 auto; padding: 10px 0; }
#inner { color: #002F2F; margin: 10px 30px; }
div.left-note, div.right-note { width: 150px; }
div.left-note div, div.right-note div { background: #046380; margin: 10px; color: #EFECCA; padding: 10px; font-weight: bold; }
div.left-note { margin-left: -180px; float: left; }
div.right-note { margin-right: -180px; float: right; }
</style>
</head>
<body>
<div id="outer">
<div id="wrap">
<div id="inner">
<div class="left-note"><div>Some important text to the left</div></div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="right-note"><div>Some important text to the right</div></div>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>