Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html [2024/07/19 00:42]
admin angelegt
+++ html [2025/05/04 14:05] (aktuell)
admin
@@ Zeile 1: / Zeile 1: @@
+{{html-cheatsheet.pdf}}
+<code html>
+<!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>
+</code>
+=====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.
+<code html>
+<div style="position: static;">Statisches Element</div>
+</code>
+====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.
+<code html>
+<div style="position: relative; top: 20px; left: 30px;">Relatives Element</div>
+</code>
+====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.
+<code html>
+<div style="position: absolute; top: 50px; left: 100px;">Absolutes Element</div>
+</code>
+====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.
+<code html>
+<div style="position: fixed; top: 0; left: 0;">Fest positioniertes Element</div>
+</code>
+====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.
+<code html>
+<div style="position: sticky; top: 20px;">Sticky Element</div>
+</code>

MBCDN

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge