Lekcja 8: Pozycjonowanie

Domyślnie elementy układają się jeden pod drugim. Aby to zmienić i np. przykleić menu do góry ekranu lub umieścić ikonę w rogu zdjęcia, musisz zrozumieć position. To klucz do zaawansowanych układów.

Kluczowe zagadnienia:

  • position: relative (przesunięcie).
  • position: absolute (elementy latające).
  • position: fixed (elementy przyklejone).
  • Warstwy z-index.

Sprawdź wiedzę (Pytania do filmu):

  1. Jaka jest domyślna pozycja każdego elementu?
  2. Co robi position: relative?
  3. Co robi position: absolute?
  4. Co robi position: fixed?
  5. Jakie właściwości przesuwają element pozycjonowany?
  6. Względem czego pozycjonuje się element absolutny?
  7. Co robi z-index?
  8. Czy element fixed przesuwa się podczas przewijania strony?
  9. Jak przykleić menu do góry strony?
  10. Co się stanie, jeśli damy elementowi absolutnemu z-index: -1?