CSS-Positionen (Position)

CSS Tutorial > Positionen

Gebräuchliche Arten zur Bestimmung von positionsbezogenen Eigenschaften in CSS sind wie folgt:

position

top

z-index

position

Die position-Eigenschaft gibt an, was für eine Positionierung benutzt wird. Mögliche Werte sind:

static (Vorgabe): gibt an, dass das Element am vorgegebenen Platz positioniert wird. Bitte beachten Sie, dass wenn static ausgewählt wird, weitere Werte für top-, bottom-, right- und left-Eigenschaften keine Wirkung haben.
absolute: platziert ein Element in Verhältnis zum derzeitigen Browserfenster. Die Position des Elements bewegt sich zusammen mit dem Rest des Inhalts, wenn es zu einem Bildlauf kommt.
relative: gibt an, wie das Element in Verhältnis zum vorgegebenen Platz positioniert wird.
fixed: platziert ein Element in Verhältnis zum derzeitigen Browserfenster. Die Position des Elements bleibt aber fest bestehen wenn es zu einem Bildlauf kommt.

top, right, bottom, left

Positionen in jede Richtung (top, right, bottom, left) können als Prozentzahl, Länge oder „automatisch” angegeben werden.

Schauen wir uns ein Beispiel an:

CSS-Statement:

div {
background-color:#FF00FF;
width:300px;
height:60px;
}

p {
position:relative;
top:10px;
left:50px;
}

Der HTML-Code:

<div>
<p>Beispielstext.
</div>

sieht so aus:

Beispielstext.

Beachten Sie, dass die Platzierung des Texts 10px oberhalb des rosa Container und 50px zur linken Seite des rosa Containers ist.

overflow

Die overflow-Eigenschaft gibt an, wie der Inhalt dargestellt wird, wenn der Platz des dafür vorgesehenen Containers nicht ausreicht. Mögliche Werte sind:

visible: Die Ganzheit des Inhaltes wird angezeigt, egal welche Höhe für das Element vorgegeben wurde.
hidden: Nur der Inhalt innerhalb des Containers wird angezeigt.
scroll: Zeigt eine vertikale und horizontale Scrollbar an, mit der der Inhalt gescrollt werden kann, egal ob der Platz des Containers ausreicht oder nicht.
auto: Wenn der Inhalt größer als der Container ist, wird eine Scrollbar angezeigt.

Hier werden Beispiele für jede overflow-Eigenschaft gegeben:

auto

Wir nutzen diesen Bereich um zu verdeutlichen, welche Auswirkung verschiedene Werte der overflow-Eigenschaften haben.

Diese hier ist ‚auto’.

hidden

Wir nutzen diesen Bereich um zu verdeutlichen, welche Auswirkung verschiedene Werte der overflow-Eigenschaften haben.

Diese hier ist ‚hidden’.

visible

Wir nutzen diesen Bereich um zu verdeutlichen, welche Auswirkung verschiedene Werte der overflow-Eigenschaften haben.

Diese hier ist ‚visible’.

scroll

Wir nutzen diesen Bereich um zu verdeutlichen, welche Auswirkung verschiedene Werte der overflow-Eigenschaften haben.

Diese hier ist ‚scroll’.

z-index

Die z-index-Eigenschaft bestimmt die Stapelanordnung eines Elements. Mit anderen Worten: Wenn es zu einer Überlappung von zwei Elementen kommt, so wird durch den z-index bestimmt, welches Element oben angezeigt wird. Das Element mit einem größeren z-index wird zuoberst angezeigt.

Wenn wir zum Beispiel zwei Blöcke mit folgendem CSS-Code definieren:

#redblock {
z-index: 1;
position:
absolute;
width:80px;
height:100px;
top:20px;
left:20px;
border: 1px solid #FFF;
background-color: #FF0000;
}

#pinkblock {
z-index: 2;
position: absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border: 1px solid #FFF;
background-color: #FF00FF;
}

Sieht der folgende HTML-Code

so aus:

Wie wir sehen können, liegt der rosa Block, mit einem z-index von 2 über dem roten Block, welcher einen z-index von 1 besitzt.

Folgende Seite: CSS Text