Keywords

position: static

Die Standard-Positionierungsmethode in CSS ist durch die Eigenschaft position: static gegeben; d.h. wenn man nicht explizit eine andere Eigenschaft für position setzt, haben alle Elemente static. Dabei werden alle Elemente in der Reihenfolge angezeigt, in der sie auch im HTML-Code vorkommen - man spricht hierbei auch vom "Document-flow".

Dabei werden alle "block-level"-Elemente (h1, div, p, form, fieldset, ul, ol,...) so dargestellt, dass sie jeweils die ganze Zeile brauchen und danach automatisch immer ein Zeilenumbruch vorgenommen wird. Inline-Elemente werden nebeneinander so dargestellt, dass sie den verfügbaren Platz verwenden und sobald die Zeile zu Ende ist (abhängig von der Bildschirmauflösung/Browserfensterbreite) wird das nächste Element einfach in die nachfolgende Zeile gerutscht. Der vertikale Abstand zwischen Block-Level Elementen wird durch deren margin bestimmt, wobei diese nicht aufaddiert werden sondern auf den größten margin "zusammenklappen" (margin collapsing). Treffen z.B. ein Paragraph mit einem Margin von 8 Pixel und ein weiterer mit einem Margin von 4 Pixel aufeinander, wird der vertikale Abstand zwischen den beiden Elementen 8 Pixel betragen.

Im Beispiel wurden noch zusätzlich zum besseren Erkennen die Schriftart und -größe sowie Rahmen und Füllfarbe der Elemente gesetzt.

Beispiel: position:static (normaler "document flow")

Module, die für die Durchführung vorausgesetzt werden