CSS - Elemente - Positionierung
1. position
Hiermit kann man festlegen, wie ein Element positioniert wird. Es gibt dabei vier Möglichkeiten:
absoluterelativefixedstatic(Standard)
Setzt man position: absolute, so bezieht sich das auf die Position des ausgewählten Elements zum übergeordneten
Eltern-Element. Aber nur, wenn dieses auch positioniert wurde. Ansonsten richten sich die Browser an der Fenstergröße aus.
relative dagegen heißt, relativ zur Normalposition des übergeordneten Eltern- Elements.
fixed ist ebenfalls eine absolute Positionierung, orientiert sich aber am Browserfenster. Das heißt, dass das Element
beim Scrollen stehen bleibt, also immer im Fenster zu sehen ist.
static selber hat keine spezielle Positionierung und ist der Standardwert.
2. Positionsangabe
Bei den folgenden Eigenschaften gelten zwei Regeln. Erstens muss man immer über position die Art der Positionierung angeben,
also zum Beispiel absolute, relative, etc. und zweitens kann man für die eigentlichen Werte nur numerische
Angaben verwenden.
top
Bestimmt die obere Position.
left
Bestimmt die linke Position.
bottom
Bestimmt die untere Position.
right
Bestimmt die rechte Position.
3. ein Beispiel
.aussen
{
position: absolute;
left: 10px;
top: 10px;
}
.innen
{
position: absolute;
left: 40px;
top: 40px;
}
.fest
{
position: fixed;
left: 100px;
top: 100px;
}
<body>
<div class="aussen">
<div class="innen">
Dumdidum
</div>
</div>
<div class="fest">Blubb blubber</div>
</body>
Erläuterung
Das <div>-Element aussen befindet sich 10 Pixel vom übergeordneten Eltern-Element entfernt. Da
dieses das <body>-Element ist, heißt das 10 Pixel links oben vom Browserfenster. Das Element innen
hat einen Abstand von 40 Pixeln zum Element aussen, also dementsprechend einen Abstand von 50 Pixeln zum Browserfenster.
Das Element fest hat einen Abstand von 100 Pixeln zum Browserfenster, und bleibt dort stehen, auch wenn gescrollt
wird.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt