Summary  
This chapter explains CSS sticky positioning, showing how an element behaves like relatively positioned until it reaches a set threshold and then “sticks” in place like a fixed element within its parent container during scrolling.

General domain of usage  
Web page content layout and navigation

**Sticky-positionering** kombinerer aspekter af både relativ og fast positionering. Når et element er positioneret sticky, opfører det sig som et relativt positioneret element, indtil det når en bestemt grænse på siden. På dette tidspunkt skifter det til at opføre sig som et fast element.
```css
position: sticky;
```
Overvej følgende illustration. Elementet med tekstindholdet `I am sticky` har sticky-positionering.

Når et element er inde i en container, og containeren forbliver inden for visningsområdet, vil elementet opføre sig, som om det var relativt positioneret. Men når en del af den overordnede container bevæger sig ud af visningsområdet, bliver elementet fastlåst på plads, så længe en del af containeren stadig er synlig på skærmen. Når hele containeren forlader visningsområdet, genaktiveres relativ positionering, og elementet forsvinder fra visningen sammen med containeren.

Lad os øve os og oprette et par sektioner med sticky-titler til dem. På den måde kan brugeren altid se titlen på den sektion, han læser nu, og derefter forsvinder den, når der scrolles.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxoMyBjbGFzcz0idGl0bGUiPkhvbWU8L2gzPgogICAgICA8cD4KICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQWIsCiAgICAgICAgY29uc2VjdGV0dXIgbmVxdWUgbGFib3JlIGVhIG5lc2NpdW50IHZlcml0YXRpcyBuYW0gcXVpIGF0IGF1dCBhdHF1ZSBxdW8KICAgICAgICBzaW50IHByb3ZpZGVudCBmYWNlcmUgcXVpc3F1YW0uIEltcGVkaXQgYmVhdGFlIGVsaWdlbmRpIHV0IHF1aXNxdWFtCiAgICAgICAgYmxhbmRpdGlpcyBlbmltIHF1b3MhIEV4cGxpY2FibyBuaWhpbCBhbGlhcyBxdW8gZXhlcmNpdGF0aW9uZW0KICAgICAgICByZXBlbGxlbmR1cyBpcHN1bSBoYXJ1bSEgVm9sdXB0YXMgY3VtLCBxdWkgcXVpYnVzZGFtLCB0ZW1wb3JhIGV2ZW5pZXQKICAgICAgICBpdXN0byBzaXQgZGVsZWN0dXMgbnVsbGEgYmxhbmRpdGlpcyB2aXRhZSBkaXN0aW5jdGlvPyBFc3QgZWxpZ2VuZGkKICAgICAgICBvZmZpY2lhIHJlcGVsbGVuZHVzIHByYWVzZW50aXVtIGl1c3RvIGVzc2UgZGVsZW5pdGksIHRlbXBvcmlidXMgcXVpCiAgICAgICAgYXNwZXJpb3JlcyBxdWlkZW0gbGFib3Jpb3NhbSBlb3MgbWFpb3JlcyBxdW9zIGFsaWFzISBOYXR1cywgY29uc2VjdGV0dXIKICAgICAgICBpc3RlLCByZXJ1bSBvcHRpbyBtb2xsaXRpYSBmYWNpbGlzIG9iY2FlY2F0aSBuZXNjaXVudCB1dCB2ZWwgb2ZmaWNpaXMKICAgICAgICBhcGVyaWFtIHRlbXBvcmlidXMuIFF1YXMsIGRvbG9yZW0hIEZ1Z2l0IGlwc2EsIG9mZmljaWlzIGZ1Z2EgbmlzaQogICAgICAgIG9iY2FlY2F0aSBvcHRpbyBpbnZlbnRvcmUsIGJlYXRhZSBhY2N1c2FtdXMgY3VtIHF1b2QgdmVsIHZvbHVwdGFzCiAgICAgICAgZGVsZWN0dXMgZXN0IHByb3ZpZGVudCByZXBlbGxlbmR1cyBkb2xvcmUsIGV0IG5lc2NpdW50IGRpZ25pc3NpbW9zLgogICAgICAgIERpY3RhIG1hZ25hbSBmYWNlcmUgc2ludCBkaXN0aW5jdGlvIG1hZ25pIGV2ZW5pZXQgY3VtcXVlIHBsYWNlYXQKICAgICAgICBleGNlcHR1cmkgZHVjaW11cywgYWQgcmVpY2llbmRpcyB2b2x1cHRhdGVtIGFzcGVyaW9yZXMgcXVpcyBhbGlxdWlkCiAgICAgICAgcmVwdWRpYW5kYWUgaW1wZWRpdCwgcXVhc2kgZWl1cyBhbmltaSBkb2xvcmUuIEFsaWFzIHByYWVzZW50aXVtIGlkLCBhZAogICAgICAgIHF1aWRlbSBlYXJ1bSBlb3MgYWRpcGlzY2kgZWEgbWludXMgYWIgZXZlbmlldCBleGNlcHR1cmkgbW9sbGl0aWEgdml0YWUuCiAgICAgICAgSW4sIGV2ZW5pZXQgcXVvcy4KICAgICAgPC9wPgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8aDMgY2xhc3M9InRpdGxlIj5Qcm9kdWN0PC9oMz4KICAgICAgPHA+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFiLAogICAgICAgIGNvbnNlY3RldHVyIG5lcXVlIGxhYm9yZSBlYSBuZXNjaXVudCB2ZXJpdGF0aXMgbmFtIHF1aSBhdCBhdXQgYXRxdWUgcXVvCiAgICAgICAgc2ludCBwcm92aWRlbnQgZmFjZXJlIHF1aXNxdWFtLiBJbXBlZGl0IGJlYXRhZSBlbGlnZW5kaSB1dCBxdWlzcXVhbQogICAgICAgIGJsYW5kaXRpaXMgZW5pbSBxdW9zISBFeHBsaWNhYm8gbmloaWwgYWxpYXMgcXVvIGV4ZXJjaXRhdGlvbmVtCiAgICAgICAgcmVwZWxsZW5kdXMgaXBzdW0gaGFydW0hIFZvbHVwdGFzIGN1bSwgcXVpIHF1aWJ1c2RhbSwgdGVtcG9yYSBldmVuaWV0CiAgICAgICAgaXVzdG8gc2l0IGRlbGVjdHVzIG51bGxhIGJsYW5kaXRpaXMgdml0YWUgZGlzdGluY3Rpbz8gRXN0IGVsaWdlbmRpCiAgICAgICAgb2ZmaWNpYSByZXBlbGxlbmR1cyBwcmFlc2VudGl1bSBpdXN0byBlc3NlIGRlbGVuaXRpLCB0ZW1wb3JpYnVzIHF1aQogICAgICAgIGFzcGVyaW9yZXMgcXVpZGVtIGxhYm9yaW9zYW0gZW9zIG1haW9yZXMgcXVvcyBhbGlhcyEgTmF0dXMsIGNvbnNlY3RldHVyCiAgICAgICAgaXN0ZSwgcmVydW0gb3B0aW8gbW9sbGl0aWEgZmFjaWxpcyBvYmNhZWNhdGkgbmVzY2l1bnQgdXQgdmVsIG9mZmljaWlzCiAgICAgICAgYXBlcmlhbSB0ZW1wb3JpYnVzLiBRdWFzLCBkb2xvcmVtISBGdWdpdCBpcHNhLCBvZmZpY2lpcyBmdWdhIG5pc2kKICAgICAgICBvYmNhZWNhdGkgb3B0aW8gaW52ZW50b3JlLCBiZWF0YWUgYWNjdXNhbXVzIGN1bSBxdW9kIHZlbCB2b2x1cHRhcwogICAgICAgIGRlbGVjdHVzIGVzdCBwcm92aWRlbnQgcmVwZWxsZW5kdXMgZG9sb3JlLCBldCBuZXNjaXVudCBkaWduaXNzaW1vcy4KICAgICAgICBEaWN0YSBtYWduYW0gZmFjZXJlIHNpbnQgZGlzdGluY3RpbyBtYWduaSBldmVuaWV0IGN1bXF1ZSBwbGFjZWF0CiAgICAgICAgZXhjZXB0dXJpIGR1Y2ltdXMsIGFkIHJlaWNpZW5kaXMgdm9sdXB0YXRlbSBhc3BlcmlvcmVzIHF1aXMgYWxpcXVpZAogICAgICAgIHJlcHVkaWFuZGFlIGltcGVkaXQsIHF1YXNpIGVpdXMgYW5pbWkgZG9sb3JlLiBBbGlhcyBwcmFlc2VudGl1bSBpZCwgYWQKICAgICAgICBxdWlkZW0gZWFydW0gZW9zIGFkaXBpc2NpIGVhIG1pbnVzIGFiIGV2ZW5pZXQgZXhjZXB0dXJpIG1vbGxpdGlhIHZpdGFlLgogICAgICAgIEluLCBldmVuaWV0IHF1b3MuIHZvbHVwdGF0ZXMgbWFnbmk/CiAgICAgIDwvcD4KICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgPGgzIGNsYXNzPSJ0aXRsZSI+QWJvdXQ8L2gzPgogICAgICA8cD4KICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQWIsCiAgICAgICAgY29uc2VjdGV0dXIgbmVxdWUgbGFib3JlIGVhIG5lc2NpdW50IHZlcml0YXRpcyBuYW0gcXVpIGF0IGF1dCBhdHF1ZSBxdW8KICAgICAgICBzaW50IHByb3ZpZGVudCBmYWNlcmUgcXVpc3F1YW0uIEltcGVkaXQgYmVhdGFlIGVsaWdlbmRpIHV0IHF1aXNxdWFtCiAgICAgICAgYmxhbmRpdGlpcyBlbmltIHF1b3MhIEV4cGxpY2FibyBuaWhpbCBhbGlhcyBxdW8gZXhlcmNpdGF0aW9uZW0KICAgICAgICByZXBlbGxlbmR1cyBpcHN1bSBoYXJ1bSEgVm9sdXB0YXMgY3VtLCBxdWkgcXVpYnVzZGFtLCB0ZW1wb3JhIGV2ZW5pZXQKICAgICAgICBpdXN0byBzaXQgZGVsZWN0dXMgbnVsbGEgYmxhbmRpdGlpcyB2aXRhZSBkaXN0aW5jdGlvPyBFc3QgZWxpZ2VuZGkKICAgICAgICBvZmZpY2lhIHJlcGVsbGVuZHVzIHByYWVzZW50aXVtIGl1c3RvIGVzc2UgZGVsZW5pdGksIHRlbXBvcmlidXMgcXVpCiAgICAgICAgYXNwZXJpb3JlcyBxdWlkZW0gbGFib3Jpb3NhbSBlb3MgbWFpb3JlcyBxdW9zIGFsaWFzISBOYXR1cywgY29uc2VjdGV0dXIKICAgICAgICBpc3RlLCByZXJ1bSBvcHRpbyBtb2xsaXRpYSBmYWNpbGlzIG9iY2FlY2F0aSBuZXNjaXVudCB1dCB2ZWwgb2ZmaWNpaXMKICAgICAgICBhcGVyaWFtIHRlbXBvcmlidXMuIFF1YXMsIGRvbG9yZW0hIEZ1Z2l0IGlwc2EsIG9mZmljaWlzIGZ1Z2EgbmlzaQogICAgICAgIG9iY2FlY2F0aSBvcHRpbyBpbnZlbnRvcmUsIGJlYXRhZSBhY2N1c2FtdXMgY3VtIHF1b2QgdmVsIHZvbHVwdGFzCiAgICAgICAgZGVsZWN0dXMgZXN0IHByb3ZpZGVudCByZXBlbGxlbmR1cyBkb2xvcmUsIGV0IG5lc2NpdW50IGRpZ25pc3NpbW9zLgogICAgICAgIERpY3RhIG1hZ25hbSBmYWNlcmUgc2ludCBkaXN0aW5jdGlvIG1hZ25pIGV2ZW5pZXQgY3VtcXVlIHBsYWNlYXQKICAgICAgICBleGNlcHR1cmkgZHVjaW11cywgYWQgcmVpY2llbmRpcyB2b2x1cHRhdGVtIGFzcGVyaW9yZXMgcXVpcyBhbGlxdWlkCiAgICAgICAgcmVwdWRpYW5kYWUgaW1wZWRpdCwgcXVhc2kgZWl1cyBhbmltaSBkb2xvcmUuIEFsaWFzIHByYWVzZW50aXVtIGlkLCBhZAogICAgICAgIHF1aWRlbSBlYXJ1bSBlb3MgYWRpcGlzY2kgZWEgbWludXMgYWIgZXZlbmlldCBleGNlcHR1cmkgbW9sbGl0aWEgdml0YWUuCiAgICAgICAgSW4sIGV2ZW5pZXQgcXVvcy4gdm9sdXB0YXRlcyBtYWduaT8KICAgICAgPC9wPgogICAgPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICA8aDMgY2xhc3M9InRpdGxlIj5UZWFtPC9oMz4KICAgICAgPHA+CiAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQsIGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIEFiLAogICAgICAgIGNvbnNlY3RldHVyIG5lcXVlIGxhYm9yZSBlYSBuZXNjaXVudCB2ZXJpdGF0aXMgbmFtIHF1aSBhdCBhdXQgYXRxdWUgcXVvCiAgICAgICAgc2ludCBwcm92aWRlbnQgZmFjZXJlIHF1aXNxdWFtLiBJbXBlZGl0IGJlYXRhZSBlbGlnZW5kaSB1dCBxdWlzcXVhbQogICAgICAgIGJsYW5kaXRpaXMgZW5pbSBxdW9zISBFeHBsaWNhYm8gbmloaWwgYWxpYXMgcXVvIGV4ZXJjaXRhdGlvbmVtCiAgICAgICAgcmVwZWxsZW5kdXMgaXBzdW0gaGFydW0hIFZvbHVwdGFzIGN1bSwgcXVpIHF1aWJ1c2RhbSwgdGVtcG9yYSBldmVuaWV0CiAgICAgICAgaXVzdG8gc2l0IGRlbGVjdHVzIG51bGxhIGJsYW5kaXRpaXMgdml0YWUgZGlzdGluY3Rpbz8gRXN0IGVsaWdlbmRpCiAgICAgICAgb2ZmaWNpYSByZXBlbGxlbmR1cyBwcmFlc2VudGl1bSBpdXN0byBlc3NlIGRlbGVuaXRpLCB0ZW1wb3JpYnVzIHF1aQogICAgICAgIGFzcGVyaW9yZXMgcXVpZGVtIGxhYm9yaW9zYW0gZW9zIG1haW9yZXMgcXVvcyBhbGlhcyEgTmF0dXMsIGNvbnNlY3RldHVyCiAgICAgICAgaXN0ZSwgcmVydW0gb3B0aW8gbW9sbGl0aWEgZmFjaWxpcyBvYmNhZWNhdGkgbmVzY2l1bnQgdXQgdmVsIG9mZmljaWlzCiAgICAgICAgYXBlcmlhbSB0ZW1wb3JpYnVzLiBRdWFzLCBkb2xvcmVtISBGdWdpdCBpcHNhLCBvZmZpY2lpcyBmdWdhIG5pc2kKICAgICAgICBvYmNhZWNhdGkgb3B0aW8gaW52ZW50b3JlLCBiZWF0YWUgYWNjdXNhbXVzIGN1bSBxdW9kIHZlbCB2b2x1cHRhcwogICAgICAgIGRlbGVjdHVzIGVzdCBwcm92aWRlbnQgcmVwZWxsZW5kdXMgZG9sb3JlLCBldCBuZXNjaXVudCBkaWduaXNzaW1vcy4KICAgICAgICBEaWN0YSBtYWduYW0gZmFjZXJlIHNpbnQgZGlzdGluY3RpbyBtYWduaSBldmVuaWV0IGN1bXF1ZSBwbGFjZWF0CiAgICAgICAgZXhjZXB0dXJpIGR1Y2ltdXMsIGFkIHJlaWNpZW5kaXMgdm9sdXB0YXRlbSBhc3BlcmlvcmVzIHF1aXMgYWxpcXVpZAogICAgICAgIHJlcHVkaWFuZGFlIGltcGVkaXQsIHF1YXNpIGVpdXMgYW5pbWkgZG9sb3JlLiBBbGlhcyBwcmFlc2VudGl1bSBpZCwgYWQKICAgICAgICBxdWlkZW0gZWFydW0gZW9zIGFkaXBpc2NpIGVhIG1pbnVzIGFiIGV2ZW5pZXQgZXhjZXB0dXJpIG1vbGxpdGlhIHZpdGFlLgogICAgICAgIEluLCBldmVuaWV0IHF1b3MuIHZvbHVwdGF0ZXMgbWFnbmk/CiAgICAgIDwvcD4KICAgIDwvZGl2PgogICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgPGgzIGNsYXNzPSJ0aXRsZSI+UHJpY2U8L2gzPgogICAgICA8cD4KICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCwgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQWIsCiAgICAgICAgY29uc2VjdGV0dXIgbmVxdWUgbGFib3JlIGVhIG5lc2NpdW50IHZlcml0YXRpcyBuYW0gcXVpIGF0IGF1dCBhdHF1ZSBxdW8KICAgICAgICBzaW50IHByb3ZpZGVudCBmYWNlcmUgcXVpc3F1YW0uIEltcGVkaXQgYmVhdGFlIGVsaWdlbmRpIHV0IHF1aXNxdWFtCiAgICAgICAgYmxhbmRpdGlpcyBlbmltIHF1b3MhIEV4cGxpY2FibyBuaWhpbCBhbGlhcyBxdW8gZXhlcmNpdGF0aW9uZW0KICAgICAgICByZXBlbGxlbmR1cyBpcHN1bSBoYXJ1bSEgVm9sdXB0YXMgY3VtLCBxdWkgcXVpYnVzZGFtLCB0ZW1wb3JhIGV2ZW5pZXQKICAgICAgICBpdXN0byBzaXQgZGVsZWN0dXMgbnVsbGEgYmxhbmRpdGlpcyB2aXRhZSBkaXN0aW5jdGlvPyBFc3QgZWxpZ2VuZGkKICAgICAgICBvZmZpY2lhIHJlcGVsbGVuZHVzIHByYWVzZW50aXVtIGl1c3RvIGVzc2UgZGVsZW5pdGksIHRlbXBvcmlidXMgcXVpCiAgICAgICAgYXNwZXJpb3JlcyBxdWlkZW0gbGFib3Jpb3NhbSBlb3MgbWFpb3JlcyBxdW9zIGFsaWFzISBOYXR1cywgY29uc2VjdGV0dXIKICAgICAgICBpc3RlLCByZXJ1bSBvcHRpbyBtb2xsaXRpYSBmYWNpbGlzIG9iY2FlY2F0aSBuZXNjaXVudCB1dCB2ZWwgb2ZmaWNpaXMKICAgICAgICBhcGVyaWFtIHRlbXBvcmlidXMuIFF1YXMsIGRvbG9yZW0hIEZ1Z2l0IGlwc2EsIG9mZmljaWlzIGZ1Z2EgbmlzaQogICAgICAgIG9iY2FlY2F0aSBvcHRpbyBpbnZlbnRvcmUsIGJlYXRhZSBhY2N1c2FtdXMgY3VtIHF1b2QgdmVsIHZvbHVwdGFzCiAgICAgICAgZGVsZWN0dXMgZXN0IHByb3ZpZGVudCByZXBlbGxlbmR1cyBkb2xvcmUsIGV0IG5lc2NpdW50IGRpZ25pc3NpbW9zLgogICAgICAgIERpY3RhIG1hZ25hbSBmYWNlcmUgc2ludCBkaXN0aW5jdGlvIG1hZ25pIGV2ZW5pZXQgY3VtcXVlIHBsYWNlYXQKICAgICAgICBleGNlcHR1cmkgZHVjaW11cywgYWQgcmVpY2llbmRpcyB2b2x1cHRhdGVtIGFzcGVyaW9yZXMgcXVpcyBhbGlxdWlkCiAgICAgICAgcmVwdWRpYW5kYWUgaW1wZWRpdCwgcXVhc2kgZWl1cyBhbmltaSBkb2xvcmUuIEFsaWFzIHByYWVzZW50aXVtIGlkLCBhZAogICAgICAgIHF1aWRlbSBlYXJ1bSBlb3MgYWRpcGlzY2kgZWEgbWludXMgYWIgZXZlbmlldCBleGNlcHR1cmkgbW9sbGl0aWEgdml0YWUuCiAgICAgICAgSW4sIGV2ZW5pZXQgcXVvcy4gdm9sdXB0YXRlcyBtYWduaT8KICAgICAgPC9wPgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LnRpdGxlIHsKICAvKiBUaGlzIGNoYXB0ZXIgZm9jdXMgKi8KICBwb3NpdGlvbjogc3RpY2t5OwogIHRvcDogMHB4OwoKICAvKiBOb3QgdGhlIGN1cnJlbnQgZm9jdXMgKi8KICBiYWNrZ3JvdW5kLWNvbG9yOiBkYXJrYmx1ZTsKICBjb2xvcjogd2hpdGU7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIHBhZGRpbmc6IDEwcHggMDsKfQoKLmNvbnRhaW5lciB7CiAgYm9yZGVyOiAycHggc29saWQgZGFya2JsdWU7CiAgbWFyZ2luOiAzMHB4IGF1dG87CiAgcGFkZGluZzogMjBweDsKICB3aWR0aDogNjAwcHg7Cn0=

> Bemærk
>
> Det er vigtigt at nævne, at vi skal angive enten `top` eller `bottom`-egenskaben, så browseren kan forstå, hvor vi forventer, at et element skal fastholdes.

Hvad er adfærden for et element med egenskaben `position: sticky`?

Opgradér dine stylingfærdigheder ved at mestre avancerede CSS-teknikker til moderne webdesign. Positionér og håndter elementer med præcision ved hjælp af avancerede positioneringsstrategier. Skab glidende overgange og engagerende animationer for at forbedre brugeroplevelsen. Transformér og manipuler elementer for dynamiske visuelle effekter. Byg responsive designs, der tilpasser sig på tværs af enheder, og lær at effektivisere din arbejdsgang med CSS preprocessorer som Sass.

Undersøg, hvad deltagerne kan forvente af dette kursus i avanceret HTML og CSS-styling. Hvilke forudsætninger kræves, før du starter kurset? Hvilke emner vil blive dækket?

Placering og håndtering af elementer på websider. Lær om de forskellige positioneringsegenskaber, opdag hvordan stablingsrækkefølgen bruges til at kontrollere synligheden af overlappende elementer, og håndter til sidst indholds-overløb.

Undersøg styrken ved overgange og lær, hvordan brugeroplevelsen kan forbedres. Opdag, hvordan egenskaber kan animeres glidende og gradvist for at skabe sømløse tilstandsskift.

Lær om animation-egenskaben, og hvordan den kan bruges til at skabe dynamiske og engagerende designs. Opdag, hvordan man opretter komplekse animationer ved hjælp af keyframes, og hvordan man styrer animationen.

Undersøg transform-egenskaben, som muliggør ændring af udseende og placering af elementer på en webside. Lær hvordan man skalerer, roterer, skæver og flytter elementer i to og tre dimensioner. Kombinér flere transformationer for at skabe mere komplekse effekter.

Principperne og teknikkerne, der anvendes i adaptivt/responsivt design, har til formål at gøre websites og applikationer tilgængelige og visuelt tiltalende på tværs af forskellige enheder, skærmstørrelser og orienteringer.

Lær om præprocessorer i CSS, og hvordan de kan hjælpe med at skrive mere effektiv og vedligeholdelsesvenlig kode. Forstå, hvordan præprocessorer kan forenkle arbejdsgangen og generere mere overskuelig CSS-kode.

Sticky-Positionering til Dynamiske Layouts

Awesome!

Sticky-Positionering til Dynamiske Layouts