Absolute positioning

Bei der statischen Positionierung, dem Standard-Positionierungsmodell, das auf einer Webseite verwendet wird, wird alles in der Reihenfolge angeordnet, in der Sie es in Ihrem HTML-Code von oben nach unten definiert haben, und alles verbleibt im übergeordneten Container. Bei der absoluten Positionierung hingegen können Sie genau bestimmen, wo im Browserfenster ein Element angezeigt werden soll, auch über anderen Elementen, wenn Sie dies wünschen.

Die absolute Positionierung wird durch Verwenden der Eigenschaft position und Festlegen des Werts auf absolute erreicht. Dies ist jedoch nicht ausreichend - Sie müssen eine oder mehrere der positionsbezogenen Eigenschaften left, right, top und bottom verwenden. Auf diese Weise können Sie die genaue Position des Elements steuern, und ohne eines dieser Elemente wird ein Element mit absoluter Position zu einem Verhalten zurückkehren, das einem statischen Element sehr ähnlich ist.

Versuchen wir also, ein Element mit einer absoluten Position hinzuzufügen, um zu sehen, wie es sich verhält:

<style type="text/css">
#absolute-div {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #6495ed;
	top: 35px;
	left: 35px;
}
</style>
<div id="absolute-div">
	Absolutely!
</div>
Hello, world!<br>
This is a great example!

Hallo Welt!<br>

Dies ist ein großartiges Beispiel!

Versuchen Sie, dieses Beispiel auszuführen, und beachten Sie zwei sehr wichtige Dinge, die sich wahrscheinlich von dem unterscheiden, was Sie von HTML und CSS gewohnt sind: Während der Text nach dem Feld definiert ist, wird das Feld weiterhin über dem zweiten Satz gerendert, und es ist auch zulässig über dem Text angezeigt werden. Dies ist die absolute Positionierung auf den Punkt gebracht - Sie können Elemente an einer beliebigen Stelle platzieren und sie sogar überlappen lassen.

In diesem Fall haben wir die Eigenschaften left und top verwendet, um unser Element von der oberen linken Ecke zu versetzen, aber bottom und right können auch verwendet werden, wenn wir den Abstand von der unteren und / oder rechten Ecke angeben möchten. Darüber hinaus können Sie sie natürlich beliebig kombinieren, wie Sie aus dem folgenden Beispiel ersehen können:

<style type="text/css">
.box {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: #6495ed;
}

.right {
	right: 10px;
}

.left {
	left: 10px;
}

.top {
	top: 10px;
}

.bottom {
	bottom: 10px;
}
</style>

<div class="box top left">Top, Left</div>
<div class="box top right">Top, Right</div>
<div class="box bottom left">Bottom, Left</div>
<div class="box bottom right">Bottom, Right</div>

Hier definieren wir CSS-Selektoren für obere, untere, linke und rechte Elemente und kombinieren sie dann, um Elemente in allen 4 Ecken des Bildschirms zu platzieren - ganz einfach, oder?

Überlappung und die Z-Index-Eigenschaft

Was passiert also bei all dieser Freiheit, wenn sich zwei Elemente überlappen? Wir haben dies bereits im ersten Beispiel dieses Artikels gesehen, aber lassen Sie mich dies an einem anderen Beispiel deutlich machen:

<style type="text/css">
.box {
	position: absolute;
	width: 100px;
	height: 100px;
}
</style>

<div class="box" style="background-color: #5f8426;>Box 1</div>
<div class="box" style="background-color: #6495ed;">Box 2</div>
<div class="box" style="background-color: #68968a;">Box 3</div>

Wenn Sie das Beispiel ausprobieren, sehen Sie nur die Box Nummer 3. Warum? Da sie alle die gleichen Positionen haben (Standardwerte für oben und links), hat das zuletzt deklarierte Element Vorrang und wird übereinander platziert. Dies ist jedoch möglicherweise nicht das, was Sie möchten. Zum Glück hat CSS eine Eigenschaft, mit der Sie dies steuern können: Die Eigenschaft z-index.

Mit der Eigenschaft z-index können wir steuern, welche Elemente sich oben befinden. Es enthält einen numerischen Wert, der standardmäßig 0 ist, und je höher der Z-Index-Wert eines Elements ist, desto höher ist der Wert, wie in diesem Beispiel dargestellt:

<style type="text/css">
.box {
	position: absolute;
	width: 80px;
	height: 80px;
	padding: 10px;
}
</style>

<div class="box" style="background-color: #5f8426; top: 10px; left: 10px; z-index: 3;">Box 1</div>
<div class="box" style="background-color: #6495ed; top: 60px; left: 60px; z-index: 1;">Box 2</div>
<div class="box" style="background-color: #68968a; top: 100px; left: 100px; z-index: 2;">Box 3</div>

Beachten Sie, dass ich mit der Eigenschaft z-index jetzt die Elemente in der gewünschten Reihenfolge definieren und sie dennoch in einer anderen Reihenfolge überlappen lassen kann. Als Randnotiz können Sie auch einen größeren Abstand zwischen den Z-Index-Werten verwenden, wenn Sie Platz für mehr Elemente dazwischen schaffen möchten, z.B.: 10, 20, 30 und so weiter.

Absolut, aber relativ

Manchmal möchten Sie vielleicht ein Element absolut positionieren, aber anstatt es innerhalb der Ränder des Browserfensters zu positionieren, möchten Sie, dass es innerhalb des übergeordneten Elements bleibt. Wie wir gesehen haben, besteht das normale Verhalten darin, das Browserfenster zu verwenden. Wenn jedoch für das übergeordnete Element die Eigenschaft position auf relative festgelegt ist, ändert sich dies. Nun könnte ich Ihnen ein Beispiel mit ein paar Kästchen in einem anderen Kästchen geben, aber stattdessen habe ich beschlossen, Ihnen zu zeigen, wie weit Sie mit der Positionierung kommen, indem Sie ein Smiley-Gesicht erstellen:

<style type="text/css">
#face {
	position: relative;
	background-color: AntiqueWhite;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	left: 20px;
	top: 20px;
}

.eye {
	position: absolute;
	background-color: #6495ed;
	width: 50px;
	height: 30px;
	top: 40px;
	left: 40px;
	border-radius: 40%;
}

#nose {
	position: absolute;
	background-color: DarkSalmon;
	width: 20px;
	height: 40px;
	top: 85px;
	left: 95px;
}

#mouth {
	position: absolute;
	background-color: DarkSalmon;
	width: 110px;
	height: 8px;
	bottom: 50px;
	right: 45px;
}
</style>

<div id="face">
	<div class="eye"></div>
	<div class="eye" style="left: 120px;"></div>
	<div id="nose"></div>
	<div id="mouth"></div>
</div>

Zugegeben, dieser Typ ist NICHT hübsch, aber es ist immer noch ziemlich cool, wie die absolute Positionierung es Ihnen ermöglicht, ein kleines Bild zu malen, oder? Beachten Sie, wie ich einen Rahmen (das Gesicht) erstelle, indem ich seine Position auf relativ setze und dann absolut positionierte Elemente innerhalb dieses Rahmens platziere - dies ist eine sehr nützliche Technik!

Zusammenfassung

Die absolute Positionierung ist sehr leistungsfähig, insbesondere wenn sie in Kombination mit einem relativ positionierten Element verwendet wird, aber auch, um Elemente beispielsweise in den Ecken des Browsers des Benutzers zu platzieren. Wenn Sie überlappende Elemente haben, stellen Sie sicher, dass Sie die z-index-Eigenschaft verwenden, um zu steuern, welches Element oben sein soll.