Elemente verschieben
Bevor wir die Elemente verschieben, rufen wir uns noch mal in Gedanken, dass es sich bei den Elementen um rechteckige Blöcke handelt.
Wir unterscheiden diese Blöcke in "Block-Boxen", "Inline-Boxen" und "Inline-Block-Boxen". Solange nichts weiter vorgegeben ist, werden diese Blöcke alle hintereinander ausgegeben, so wie sie im Quelltext stehen.
Block-Boxen
Die erste "Block-Box" wird so weit wie möglich in der linken oberen Ecke platziert.
Sollte darin eine weitere "Block-Box" stehen, wird sie so breit wie möglich bzw. so breit wie ihre umliegende Box. Nachfolgende "Block-Boxen" werden untereinander dargestellt.
Inline-Boxen
Die erste "Inline-Box" wird auch so weit wie möglich in der linken oberen Ecke platziert.
Nachfolgende "Inline-Boxen" werden nebeneinander dargestellt, bis nicht mehr genug Platz vorhanden ist, dann rutschen diese in die nächste Zeile.
Inline-Block-Boxen
"Inline-Block-Boxen" sind eine Mischung aus "Inline-Boxen" und "Block-Boxen".
Sie verhalten sich wie "Blockelemente" mit dem Unterschied, dass Sie keinen integrierten Zeilenumbruch haben. Sie können wie "Block-Boxen" formatiert werden, stehen aber wie "Inline-Boxen" nebeneinander.
Praktisches Beispiel
Zur Verdeutlichung werden wir wieder unsere HTML-Datei verändern.
Wir entfernen den <div>-Bereich mit den Inhalten "Text01" und "Text02".
An derselben Stelle erstellen wir 3 neue <div>-Bereiche, die wir mit "Box01", "Box02" und "Box03" kennzeichnen.
<body>
...
<div>Box01</div>
<div>Box02</div>
<div>Box03</div>
</body>
Zusätzlich vergeben wir jeder Box noch eine einfache "id".
<body>
...
<div id="Box01">Box01</div>
<div id="Box02">Box02</div>
<div id="Box03">Box03</div>
</body>
Um die Boxen optisch besser auseinanderhalten zu können, vergeben wir noch schnell ein paar Werte in der CSS-Datei, in dem bereits bestehenden "Deklarationsblock" vom "Selektor" "div".
div {
font-size: 200%;
background-color: silver;
padding: 10px;
border: 5px solid red;
border-radius: 1rem;
margin: .5rem;
}
Die definierten Eigenschaften beschreiben die Größe, die Farbe und den Abstand von den "Block-Boxen" und dem Rahmen.
Es ist klar zu erkennen, dass alle Boxen so viel Platz wie möglich in Anspruch nehmen und jede nachfolgende Box nach einem Zeilenumbruch in der nächsten Zeile dargestellt wird.
Um die Eigenschaften der "Block-Boxen" zu verändern, verwenden wir die Eigenschaft "width" und reduzieren die breite der Boxen auf "25%" des üblichen Platzbedarfs.
div {
...
width: 25%;
}
Die Boxen nehmen jetzt zwar weniger Platz in Anspruch, aber sie beinhalten immer noch einen Zeilenumbruch.
Dieses Verhalten ist auf die Eigenschaft "position" zurückzuführen.
Solange wir für die Eigenschaft "position" keinen Wert definiert haben, ist der Wert bei <div>-Elementen "static".
Ein kleiner Ausflug in der Entwicklerumgebung F12 zeigt uns die Voreinstellungen und vergebenen Werte zu den markierten Elementen.
Wenn das Element markiert ist (grün) können wir unter dem Menüpunkt "Computed" (blau) die bereits verwendeten Eigenschaften und Werte (rot) betrachten. Für eine erweiterte Übersicht können wir einen Haken in der Checkbox "Show all" (gelb) setzen. Nun werden alle Eigenschaften und Werte vom markierten Element angezeigt.
Wenn wir nun bis zum Buchstaben p scrollen, finden wir auch die Eigenschaft "position" und den Wert "static" (gelb).
Ein genauerer Blick auf die verschiedenen Eigenschaften, die ein Element haben kann, schadet sicherlich nicht und lässt auch viel Spielraum für Experimente.
Mit der Eigenschaft "position" können Elemente aus dem normalen Elementfluss gerissen werden.
absolute
Mit dem Wert "absolute" wird das Element aus dem normalen Elementfluss gelöst und unabhängig verschoben.
Ein anderes Element kann dabei verdeckt werden, weil es bei der Platzvergabe nicht berücksichtigt wird.
#Box01 {
position: absolute;
top: 22rem;
left: 3rem;
}
Die "Box01" wurde aus dem Elementfluss entfernt und der Browser stellt alle Elemente so dar, als wenn "Box01" nicht existieren würde.
Dann wurde "Box01" von der oberen linken Ecke betrachtet "22rem" nach unten und "3rem" nach rechts versetzt eingeblendet.
Die Eigenschaften "top" und "left" in der CSS-Datei definieren jeweils den Abstand von der linken oberen Ecke.
relative
Wenn wir der Eigenschaft "position" den Wert "relative" geben, dann können wir das Element von seiner ursprünglichen Position aus verändern.
#Box01 {
position: relative;
top: 2rem;
left: 2rem;
}
Der Bereich, in dem das Element vorher stand, ist nun geschützt und wird nicht von anderen Elementen beansprucht.
z-index
Positionierte Elemente lassen sich nicht nur über die "X" und "Y" Achsen verschieben, sondern auch in der dritten Dimension.
Die Eigenschaft "z-index" lässt uns die Reihenfolge festlegen, in der wir Elemente übereinanderlegen können.
Das klappt aber nur mit Elementen, die mit der Eigenschaft "position" verändert wurden.
#Box01 {
position: relative;
top: 2rem;
left: 2rem;
z-index: 1;
}
#Box02 {
position: relative;
z-index: 0;
}
Die "Box01" liegt über die "Box02".
Wenn die Werte von "z-index" getauscht werden, liegt "Box02" über "Box01".
#Box01 {
position: relative;
top: 2rem;
left: 2rem;
z-index: 0;
}
#Box02 {
position: relative;
z-index: 1;
}
Der kleinste Wert von "z-index" liegt hinten und der größte Wert liegt am dichtesten zum Benutzer.
fixed
Der Wert "fixed" verhält sich wie "absolute" mit dem Unterschied, dass das Element nicht mitscrollt.
Um das zu verdeutlichen, werden wir einen kleinen Pfeil in die rechte untere Ecke packen, der ständig zu sehen ist. Diesem Pfeil werden wir einen Link geben, der uns zum Anfang der Seite führt. Dafür werden wir wieder etwas an unserer HTML-Datei ändern.
<body>
<h1 id="oben">Hauptüberschrift</h1>
...
<div id="Box03">Box03</div>
<a href="#oben"><img src="pfeil.png" alt="schwarzer Pfeil der nach oben zeigt" id="pfeil"></a>
</body>
Nachdem der Link mit dem Bild vergeben ist und die <h1> Überschrift die "id" "oben" bekommen hat, können wir über CSS den Pfeil in die rechte untere Ecke setzen.
#pfeil {
position: fixed;
top: 80%;
left: 80%;
}
Mit einem Klick auf dem Pfeil werden wir zum Seitenanfang gebracht.
Weiter mit Farben