CSS-Positionierung
Allgemeines:
Die Positionierung eines Elements bietet gestalterisch einen gewissen Spielraum.
So kann man mit einer gewissen Positionierung eines Elements andere Überlagern, per JavaScript bewegen lassen, oder einfach eine bestimmte Anordnung der Elemente festlegen.
Diese Angabe im CSS kann auf alle Elemente angewendet werden, ist nicht vererbbar und zeigt sich optisch im Browser.
Die vier Arten:
- static
- relative
- absolute
- fixed
static
Initialwert eines Elements.
Die Positionierung durch top,right,bottom und left ist hier unwirksam.
Elemente mit diesem Wert werden von links nach rechts und oben nach unten positioniert, also im Textfluß.
relative
Relative Positionierung im Textfluß.
Die Angaben top,right,bottom und left, verschieben dieses Element aus deren relativen Position und hat keinen Einfluss auf die nachfolgenden Elemente.
absolute
Absolute Positionierung eines Elements zum Eltern-Element, welches ebenfalls positioniert sein muss.
Diese Elemente liegen über alle anderen und haben keinen Einfluss auf die Positionierung der anderen.
Die Angaben top,right,bottom und left, positionieren dieses Element ausgehend vom Eltern-Element... dies kann z.B. ein anderes DIV oder der BODY Tag sein.
fixed
Wie absolute. Bis auf, dass sich das Element am Browserfenster orientiert und nicht mit gescrollt wird.
Man kennt diese Positionierung von fest positionierten Navigationen oder Werbebannern.
im CSS wird die Positionsart wie folgt bestimmt:
#beispiel {
position: fixed; <<< Art der Positionierung
top: 10px; <<< Abstand von oben
left: 20px; <<< Abstand von links
}
Positionierung durch "float":
Durch das Floaten von Elementen werden diese aus dem Textfluss genommen und verdrängen so nachfolgende Elemente mit ihrer Breite und Höhe und nicht in der gesamten Breite.
So können zum Beispiel Bilder von Texten umgeben werden.
Arten von float:
- left
- right
Left positioniert das Element links im Eltern-Element und right tut dieses rechts im Eltern-Element.
#beispiel {
float: left;
}
Weiterführende Links
http://little-boxes.de/lb1/IV-css-positionierung.html