Container mit CSS positionieren
Container mit CSS positionieren
Um per CSS div Container, images, links, paragraphen und und und zu positionieren, gibt es verschiedene Möglichkeiten. Eine einfach zu nutzende Möglichkeit ist das Objekt per position zu platzieren.
Es gibt zwei Möglichkeiten, zu positionieren: absolut und relativ.
Positioniert man absolut, dann ist die Positionierung des Objektes ohne konkrete Abhängigkeiten zu dem Rest der Seite.
Positioniert man relativ, dann bestimmt der Content, der sich vor dem Objekt befindet die Position.
Ich möchte Ihnen das Anhand von zwei Beispielen zeigen.
Ich erstelle in einer HTML-Datei einen DIV-Container. Ich gebe ihm die ID divcnt. Der Container soll 500px x 500px groß sein und einen grauen Hintergrund haben.
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
@import url("pos.css");
</style>
</head>
<body>
<div id="divcnt"></div>
</body>
</html></pre>
Beispielcode pos.css:
<pre>#divcnt {
background: #cccccc;
width: 500px;
height: 500px;
}</pre>
In den Div Container soll nun ein weiterer Div Container mit einer anderen Farbe gesetzt werden.
Der zweite Container soll 150px vom oberen und 50px vom linken Rand entfernt sein.
Er soll die Maße 50px x 50px besitzen.
Die Hintergrundfarbe soll dunkler sein, als die, des ersten Containers.
Der Container soll divcnt2 heißen.
Beispielcode HTML:
<code>
<pre><html>
<head>
<style type="text/css">
@import url("pos.css");
</style>
</head>
<body>
<div id="divcnt"><div id="divcnt2"></div></div>
</body>
</html></pre>
Beispielcode CSS:
<pre>#divcnt {
background: #cccccc;
width: 500px;
height: 500px;
}
#divcnt2 {
background: #444444;
width: 50px;
height: 50px;
position: absolute;
left: 50px;
top: 150px;
}</pre>
Wenn Sie sich dieses Beispiel ansehen, werden Sie feststellen, daß der zweite Container innerhalb des ersten nach rechts unten versetzt ist. Der Abstand beträgt genau die oben in der CSS festgelegten Maße.
Ersetzen wir nun das absolute mit relative:
Beispielcode CSS:
<pre>#divcnt {
background: #cccccc;
width: 500px;
height: 500px;
}
#divcnt2 {
background: #444444;
width: 50px;
height: 50px;
position: relative;
left: 50px;
top: 150px;
}</pre>
Sie sehen nun einen kleinen Unterschied zwischen absoluter Positionierung und relativer Positionierung.
Bei der relativen Positionierung sollte der Kasten ein wenig nach rechts unten verrutscht sein.
Das hat folgenden Grund: Der erste Container muss auch positioniert sein, damit die absolute Positionierung des zweiten Containers von dem ersten Container abhängig werden kann.
Was passiert nun, wenn wir den ersten Container auch positionieren? Wir testen dies gemeinsam:
Beispielcode CSS:
<pre>#divcnt {
background: #cccccc;
width: 500px;
height: 500px;
position: absolute;
left: 100px;
top: 100px;
}
#divcnt2 {
background: #444444;
width: 50px;
height: 50px;
position: relative;
left: 50px;
top: 150px;
}</pre>
Sie können sehen, daß der zweite Container nun mit dem ersten mit gewandert ist. Nun sollte auch die absolute Positionierung des zweiten Containers das gleiche Ergebnis liefern:
Beispielcode CSS:
<pre>#divcnt {
background: #cccccc;
width: 500px;
height: 500px;
position: absolute;
left: 100px;
top: 100px;
}
#divcnt2 {
background: #444444;
width: 50px;
height: 50px;
position: absolute;
left: 50px;
top: 150px;
}</pre>
Wie Sie gesehen haben sollten, ist der Kasten diesmal tatsächlich an der gleichen Stelle, wie bei der relativen Positionierung. Eine absolute Positionierung eines Objektes setzt voraus, daß alle übergeordneten Container auch positioniert wurden.
Nun zeige ich Ihnen den Unterschied zwischen absoluter und relaitver Positionierung. Wir fügen in der HTML-Datei vor den zweiten Div-Container einen Dummy-Text ein:
Beispielcode HTML:
<pre><html>
<head>
<style type="text/css">
@import url("pos.css");
</style>
</head>
<body>
<div id="divcnt">
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
Dummy-Text<br>
<div id="divcnt2"></div>
</div>
</body>
</html></pre>
Folgendes sollte nun passiert sein: Der zweite Container überlagert stellenweise den Dummy-Text.
Um dies zu verhindern müssen wir dem zweiten Div-Container mitteilen, daß er den Abstand nach oben zwar eingehalten werden soll, aber wenn vorher noch Content erscheint, dann soll er den bitte nicht überlagern, sondern einfach nach unten ausweichen. Dazu verwenden wir nun die relative Positionierung:
Beispielcode CSS:
<pre>#divcnt {
background: #cccccc;
width: 500px;
height: 500px;
position: absolute;
left: 100px;
top: 100px;
}
#divcnt2 {
background: #444444;
width: 50px;
height: 50px;
position: relative;
left: 50px;
top: 150px;
}</pre>
Nun sieht alles wieder schön sauber aus.
Es gibt noch andere Möglichkeiten Objekte zu positionieren. Ich werde Ihnen alle Alternativen Schritt für Schritt zeigen.
Author: Andreas Lang
Andreas Lang konzentriert sich seit zwei Jahrzehnten auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.
