Inhaltsverzeichnis

<!DOCTYPE html>
<html lang="de">
<head>
 
    <title>Willkommen</title>
    <meta name="description" content="Meine Website">
    <meta charset="utf-8"
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js"></script>
    <style>
        div.test { border: 1px solid black; display:block; }
    </style>
    <script type="text/javascript">
        console.log("Ein Script im Header");
    </script>
 
</head>
<body>
 
    <div class="test">Willkommen auf meiner Website</div>
 
    <script type="text/javascript">
        console.log("Ein Script im Body");
    </script>
 
</body>
</html>

Position

Static

Die standardmäßige Positionierung für HTML-Elemente ist statisch. In diesem Modus werden Elemente im Fluss des Dokuments platziert. Das bedeutet, dass sie so angeordnet werden, wie sie im HTML-Code erscheinen. Statische Positionierung bietet wenig Kontrolle über die genaue Platzierung und wird normalerweise für Elemente verwendet, bei denen keine besondere Positionierung erforderlich ist. 

<div style="position: static;">Statisches Element</div>

Relative

Relative Positionierung ermöglicht es, ein Element relativ zu seiner normalen Position zu verschieben. Dies kann mithilfe der Eigenschaften position: relative; und Verschiebungswerten für top, right, bottom und left erreicht werden. Relative Positionierung beeinflusst die Position anderer Elemente nicht und lässt den Platz, den das Element ursprünglich eingenommen hat, unverändert. 

<div style="position: relative; top: 20px; left: 30px;">Relatives Element</div>

Absolute

Absolute Positionierung erlaubt es, ein Element an einer bestimmten Stelle im Bezug auf das nächstgelegene übergeordnete positionierte Element zu platzieren. Falls kein übergeordnetes positioniertes Element vorhanden ist, wird das Dokument als Bezug genutzt. Absolute Positionierung eignet sich gut für Overlay-Effekte oder Elemente, die unabhängig von anderen Inhalten positioniert werden sollen. 

<div style="position: absolute; top: 50px; left: 100px;">Absolutes Element</div>

Fixed

Mit fester Positionierung bleibt ein Element immer an derselben Stelle im Anzeigebereich, während der Benutzer durch die Seite scrollt. Dies ist nützlich für Menüleisten oder andere UI-Elemente, die stets sichtbar sein sollen. 

<div style="position: fixed; top: 0; left: 0;">Fest positioniertes Element</div>

Sticky

Sticky Positionierung kombiniert Merkmale von relativer und fester Positionierung. Ein „sticky“ Element verhält sich anfangs wie ein relativ positioniertes Element, wird jedoch beim Scrollen zu einem fest positionierten Element, sobald es eine bestimmte Position erreicht. Dies ist besonders praktisch für Haftnotizen und Navigationsleisten. 

<div style="position: sticky; top: 20px;">Sticky Element</div>