====== Positionieren von Elementen ====== Es gibt verschiedene Möglichkeiten, Elemente per CSS an eine vorbestimmte Position zu setzen. ===== Statische Positionierung ===== Die statische Positionierung ist die häufigst-angwendete, und darum auch die Standardpositionierungsart. Die Elemente werden damit im normalen Textfluss dargestellt, wie bisher bei allen Beispielen. Die CSS-Regel für die statische Positionierung ist **position: static** - weil es aber sowieso die Standardeinstellung ist, muss diese nicht angegeben werden. ++++ (X)HTML/CSS-Beispielcode anzeigen | TITEL
Erste Box
Zweite Box
 ++++ ===== Absolute Positionierung ===== Bei der absoluen Positionierung werden die Element aus dem Textfluss genommen, und an eine festgelegte Stelle gerückt. Dadurch können sich auch mehrere Elemente überlagern. Angegeben wird wieder Positionierungstyp mit **position: absolute**, während die Position mit den Eigenschaften **left: ..**, **top: ..**, **right: ..** und **bottom: ..** festgelegt wird. Die Werte für diese Eigenschaften können beliebige Längenangaben mit allen bekannten Einheiten sein. Sie beziehen sich, wenn es kein übergeordnetes Element gibt, das selbst mit position: absolute; positioniert wird, auf das Browserfenster - ansonsten auf das übergeordnete Element (aber eben nur unter der **Bedingung**, das dieses übergeordnete Element selbst absolut positioniert ist!). Meist gibt man für left, top, right und bottom einen Wert mit der Einheit em an, weil sich das Design somit an die Schriftgröße es Benutzers anpasst. * Die Eigenschaften stehen immer für Abstände, also top: legt den Abstand vom obersten Rand des Browserfensters bzw. des übergeordneten Elements fest. * Man verwendet immer ENTWEDER top: .. ODER bottom: .. bzw. left: .. ODER right: .. ++++ Beispiel 1: 2 DIVs ohne übergeordnetes Element | Positionierung
Erste Box
Zweite Box
 ++++ ++++ Beispiel 2: 2 DIVs ohne übergeordnetes Element, 1 DIV das einem der beiden DIVs untergeordnet ist | Positionierung
Erste Box
Zweite Box
Dritte Box
 ++++ An Beispiel 2 sieht man: Wäre der Bezugspunkt immer das Browserfenster, und nicht das übergeordnete Element, müsste die 3. Box an der gleichen Position wie die 2. Box sein. ++++ Beispiel 3: gleich wie BSP2, jedoch wird die übergeordnete Box nicht mehr mit position: absolute positioniert | Positionierung
Erste Box
Zweite Box
Dritte Box
 ++++ Beispiel 3 zeigt die Bedingung für die Beziehung zwischen übergeordnetem und untergeordnetem Element. ===== Relative Positionierung ===== Bei der relativen Positionierung wird ein Element relativ zu ihrem eigentlichen (unsprünglichen) Platz (im Textfluss) positoniert. Dabei verändert sich die Position der umgebenden Elemente nicht. ++++ (X)HTML/CSS-Beispielcode anzeigen | Positionierung
Erste Box
Zweite Box
Dritte Box
 ++++ ===== Fixierte Positionieurng ===== Die fixierte Positionierung funktioniert wie die absolute, mit 2 Unterschieden: * Die Positionsangaben beziehen sich IMMER auf das Browserfenster, nicht auf eventuelle übergeordnete Elemente * Das Element scrollt mit den übrigen Elementen nicht mit, es bleibt immer an dieser einen Stelle. ++++ (X)HTML/CSS-Beispielcode anzeigen | Positionierung
Erste Box
Zweite Box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 ++++ ===== Überlappungen (z-Achse) und Durchsichtigkeit ===== ==== Überlappungen ==== Wie bereits gesehen kann es bei manchen Positionierungstypen zu Überlappungen kommen. Will man festlegen, welche(s) Element(e) dabei vorne liegen, macht man das mit der Eigenschaft **z-index:** - je höher der Wert dieser Eigenschaft, desto weiter vorne erscheint das Element. Der Wert muss in keiner bestimmten Folge angegeben werden, sondern es können beispielsweise auch die Werte 5, 16, 33, 67 vorkommen. z-index funktioniert nur bei absolut positionierten Elementen. ++++ (X)HTML/CSS-Beispielcode anzeigen | z-index
Erste Box
Zweite Box
Dritte Box
 ++++ ==== Durchsichtigkeit (Opacity) ==== Ebenfalls interessant ist die Eigenschaft **opacity:**, diese gibt den Durchsichtigkeitsgrad eines Elements an. Leider wird diese derzeit noch von vielen Browser unterschiedlich implementiert. Als Wert für opacity: gibt man einen Wert zwischen 0 und 1 an.