Beim Erstellen von Websites oder dem Design von Elementen auf einer Webseite sind Margin, Border und Padding wichtige Konzepte, die helfen, den Abstand, den Rahmen und den Innenraum von Elementen zu kontrollieren.
Margin
Der Abstand um ein Element herum, außerhalb des Rahmens.
style="margin: 10px;
Border
Der Rahmen um ein Element.
style="border: 1px solid black;
Padding
Der Abstand zwischen dem Inhalt und dem Rand eines Elements.
style="padding: 10px
Mit CSS-Positionierung kannst du genau festlegen, wo sich Elemente auf einer Webseite befinden sollen. Es gibt spezielle CSS-Befehle, die dir dabei helfen. Mit diesen Befehlen kannst du steuern, ob ein Element an einer bestimmten Stelle bleibt oder sich relativ zu anderen Elementen bewegt.
position: static
Das Element verhält sich normal und fließt im Dokument mit den anderen Elementen.
<div style="position: static;">Inhalt</div>
position: relative
Das Element kann verschoben werden, indem du Werte wie „top“ oder „left“ verwendest, aber es bleibt innerhalb seines normalen Platzes im Dokumentfluss.
<div style="position: relative; top: 20px;">Inhalt</div>
position: absolute
Das Element wird relativ zu seinem nächsten umgebenden Element, das eine Positionierung hat, verschoben. Wenn es kein umgebendes Element gibt, wird es relativ zum gesamten Dokument verschoben.
<div style="position: absolute; top: 50px; left: 100px;">Inhalt</div>
position: fixed
Das Element bleibt an einer festen Position im Fenster sichtbar, auch wenn du auf der Webseite scrollst.
<div style="position: fixed; top: 0; right: 0;">Inhalt</div>
z-index
Definiert die Stapelreihenfolge von Elementen, wenn sie sich überlappen. Ein höherer Wert bedeutet, dass das Element über anderen Elementen angezeigt wird.
<div style="position: absolute; z-index: 1;">Inhalt</div>