Wenn man einem <div>Bereich gar nicht sagt, wo er hinsoll, geht er mit seiner linken oberen Ecke brav zum obersten freien Punkt des übergeordneten Objektes - hier ist das der Nullpunkt der Seite. Dort beansprucht er, auch wenn man es ihm nicht ansieht, als sog. "Block-Level-element" stets eine ganze Zeile. Für Weitere <div>Bereiche ohne Positionsangabe liegt daher der nächste freie Punkt unmittelbar unter dem Vorgänger, und zwar so nahe am Rand, wie möglich. Auf diese Weise sind die Bereiche #1-#3 hier an ihre jeweilige Position gekommen.
Genau genommen würden die <div>s ohne jede Trennungsfuge aneinanderrutschen - so wie hier #2 und #3. Damit man sie besser auseinanderhalten kann, haben sie hier jedoch durch den Style "margin-top:1px" Order erhalten, ein Pixel Abstand voneinander zu halten.
Und der Abstand zwischen #5 und #6? Der kommt daher, daß #5 in wirklichkeit gar kein Bereich mit <div> ist, sondern ein Absatz <p>, der per Stylezuweisung eine feste Breite und eine Hintergrundfarbe bekommen hat. Dieser Absatz verhält sich ansonsten hier genau wie ein <div> - mit einer Ausnahme: Dahinter kommt ein Absatz. Was man ja irgendwie verstehen kann.
<div>s, denen kein Punkt für ihre Ecke linksoben ausdrücklich zugewiesen wurde, gehen immer an den Punkt, den das vorhergehende Element für "hier gehts weiter" vorsieht. Die Bereiche folgen dem "Fluß" des Dokuments.
Schön beobachten kann man das an #7. Das ist nämlich wieder kein "echter" Bereich mit <div>, sondern ein per Stylezuweisung positioniertes <span>. Nun unterscheidet sich <span> dadurch von <p>, daß danach kein Absatz kommt. Und von <div> unterscheidet es sich dadurch, daß es kein Block-Level-Element, sondern ein Inline-Level-Element ist: Danach geht es in der gleichen Zeile weiter, wie an #8 leicht zu sehen ist. Der nachfolgende <div>Bereich #9 wieder in eienr neuen Zeile an. Ohne Absatz, denn der Vorgänger ist ja kein <p>. Und der abschließende Bereich #10 ist überhaupt kein <div>Bereich, sondern eine diesen Regeln entsprechend positionierte Grafik <img> - die Positionierungsregeln gelten für (fast) alle Elemente.
#5
