Zusammenfassung

In dieser Lektion hast du gelernt, wie der Browser Elemente auf der Seite platziert und wie du das änderst. Du weißt jetzt, dass:

• Elemente, wenn wir nichts ändern, im normalen Fluss platziert werden: eins nach dem anderen, in der Reihenfolge, in der sie im HTML stehen.
• Block-Elemente (display: block), etwa Überschriften, Absätze und div, in einer neuen Zeile beginnen und so breit sind wie ihr Elternelement. Wenn sie eine Breite haben, können wir sie mit margin: 0 auto zentrieren.
• Inline-Elemente (display: inline), etwa strong, a und span, wie Wörter in einer Textzeile sitzen. Sie ignorieren width, height sowie den oberen und unteren Außenabstand (Bilder sind eine Ausnahme).
• Inline-Block-Elemente (display: inline-block) sich wie Inline-Elemente in einer Reihe aufreihen, wir sie aber wie Blöcke bemessen können. Wie Text werden sie mit text-align am Elternelement ausgerichtet.
• display: none ein Element ausblendet und das Element keinen Platz einnimmt. Mit :hover können wir es nur anzeigen, solange sich der Mauszeiger über einem anderen Element befindet.
• die Standard-position static ist: Das Element bleibt dort, wo der normale Fluss es hinsetzt.
• die Verschiebungen top, right, bottom und left Elemente bewegen, deren Position nicht static ist. Negative Werte bewegen sie in die andere Richtung.
• position: relative ein Element von seinem ursprünglichen Platz verschiebt, der für es reserviert bleibt.
• position: absolute ein Element aus dem normalen Fluss nimmt. Seine Verschiebungen werden von seinem nächsten Vorfahren mit einer anderen Position als static aus gemessen oder, wenn es keinen gibt, vom ersten Bildschirm der Seite. Meistens setzen wir es in ein Elternelement mit position: relative.
• position: fixed wie absolute funktioniert, aber seine Verschiebungen vom Browserfenster aus gemessen werden, das Element bewegt sich also beim Scrollen nicht.
• position: sticky ein Element im normalen Fluss hält, bis das Scrollen es über den Rand tragen würde, den seine Verschiebung festlegt. Dann klebt es an diesem Rand, aber nur, solange sein Elternelement auf dem Bildschirm ist.
• z-index entscheidet, welches der überlappenden Elemente mit einer Position oben liegt: Der höhere Wert gewinnt.

Unsere Rassen-Karten stehen jetzt in einer Reihe, aber inline-block gibt uns wenig Kontrolle über sie: Wir können sie nicht einfach gleichmäßig über die Reihe verteilen oder gleich hoch machen. In der nächsten Lektion, Flexbox, lernst du das wichtigste Werkzeug kennen, um Elemente nebeneinander anzuordnen.