Ćwiczenia

Znacznik position ma 5 różnych wartości:

static - div przesuwa się wraz ze stroną
relative pozycjonuje w odniesieniu do standardowej pozycji; przesunięty 2% od lewej
fixed
absolute
sticky

Ten div ma pozycje static | position: static; border: 1px solid black

Ten div ma pozycje relative | position: relative; left: 10%; border: 2px solid red;

div.fixed { position: fixed; border: 2px solid red; }

Ten div ma pozycję fixed

position: fixed zatrzymuje element w jednym miejscu

div.absolute { position: absolute; left: 26%; border: 2px solid red; }

Ten div ma pozycję absolute

position: absolute pozycjonuje w odniesieniu do najbliższego przodka; jeśli nie ma przodka, odnosi się do ciała dokumentu

div.sticky { position: sticky; border: 2px solid red; }

Ten div ma pozycje sticky

position: sticky powoduje, że element 'przyklei' się do krawędzi dokumentu po jego przewinięciu

Własność z-index pozwala na pozycjonowanie elementów nad lub pod sobą

Ten div jest pod innym

Ten div jest nad innym