9. Pozycjonowanie elementów – position, z-index, overflow

Position pozwala umieszczać elementy poza normalnym flow, z-index zarządza warstwami.

Dlaczego to ważne?

Umożliwia modale, sticky nav, tooltips. W 2026: anchor positioning dla zaawansowanych popupów.

Typy position

.relative { position: relative; top: 10px; left: 20px; } /* względem siebie */
.absolute { position: absolute; top: 0; right: 0; } /* względem najbliższego relative */
.fixed { position: fixed; bottom: 20px; right: 20px; } /* względem viewport */
.sticky { position: sticky; top: 0; } /* klei się przy scrollu */

z-index i overflow

.overlay { position: absolute; z-index: 10; } /* wyższa warstwa */
.kontener { overflow: auto; } /* scroll jeśli za duży */
.kontener-hidden { overflow: hidden; } /* ukrywa nadmiar */

• position: relative; – baza dla absolute
• position: absolute; – poza flow
• position: fixed; – zawsze widoczny
• position: sticky; – klei przy scrollu
• z-index – kolejność warstw
• overflow: hidden; – ukrywa nadmiar
• top/right/bottom/left – offsety

Zadanie

W pliku style.css i index.html:

• zrób sticky header
• dodaj absolute badge na karcie
• użyj z-index dla nakładających się elementów
• ustaw overflow: hidden na kontenerze z dużą treścią