#Layout

7 ερωτήσεις

• Ποια είναι η διαφορά μεταξύ block και inline στοιχείων;HTML#layoutJunior›
• Τι ελέγχει η ιδιότητα display;CSS#layoutJunior›
• Ποιες είναι οι τιμές CSS position;CSS#layoutJunior›
• Πώς λειτουργούν το z-index και τα stacking contexts;CSS#layoutMiddle›
• Πώς λειτουργεί η ιδιότητα overflow και τα κοντέινερ scroll;CSS#layoutMiddle›
• . Warum funktioniert es häufig nicht — die Fehlerfälle **1. Ein Vorfahr hat `overflow: hidden/auto/scroll`.** Dies ist die Ursache Nr. 1. Sticky-Positionierung wird durch jeden scrollbaren Vorfahr unterbrochen, da das Element relativ zu *diesem* Scroll-Container klebt, nicht zur Seite: [[CODE_2]] **2. Das übergeordnete Element ist nicht hoch genug.** Sticky funktioniert nur, wenn das übergeordnete Element höher als das sticky-Element ist — wenn das übergeordnete Element die gleiche Höhe hat, gibt es nichts zu scrollen, es scheint also nie zu kleben. **3. Kein Schwellwert gesetzt.** Das Vergessen von `top`/`bottom` bedeutet keinen Klebepunkt. **4. Höhenbeschränkungen für das übergeordnete Element** (z. B. ein flex-Element, das Elemente ausdehnt) können auch den Scrollbereich entfernen. ## Debugging-Checkliste [[CODE_3]] ## Warum es wichtig ist `position: sticky` ermöglicht Sticky Headers, Tabellenheader, Seitenleisten und "Scrollspy" UIs ohne JavaScript. Aber seine Besonderheiten — besonders dass ein `overflow` auf *jedem* Vorfahr es stillschweigend bricht — machen es zu einer häufigen Quelle für "Warum klebt das nicht?" Debugging. Das Kennen des enthaltenden Block-Umfangs und der Overflow-Falle ist das, was es Ihnen ermöglicht, es zuverlässig zu verwenden.CSS#layoutSenior›
• Ποιες σύγχρονες συναρτήσεις και χαρακτηριστικά CSS απλοποιούν τη διάταξη (clamp, aspect-ratio, subgrid);CSS#layoutSenior›