Pozycjonowanie elementów za pomocą CSS

Lekcja: Pozycjonowanie elementów za pomocą CSS

Cel lekcji:

  • Zrozumienie mechanizmów pozycjonowania elementów w CSS.
  • Praktyczne zastosowanie właściwości position, z-index, top, left, right, bottom, float, oraz clear.
  • Poznanie różnych metod pozycjonowania, takich jak statyczne, względne, absolutne, czy stałe.
  • Tworzenie layoutów stron internetowych za pomocą metod: Grid, Flexbox, oraz układów procentowych.

Teoria

CSS oferuje różne metody pozycjonowania elementów, które można dostosować do potrzeb projektu:

  1. Position: Static (domyślne):

    • Elementy są umieszczane zgodnie z naturalnym przepływem dokumentu.
    element {
  position: static;
}

  2. Position: Relative:

    • Element jest pozycjonowany względem swojego pierwotnego miejsca w dokumencie.
    element {
  position: relative;
  top: 10px;
  left: 20px;
}

  3. Position: Absolute:

    • Element jest pozycjonowany względem swojego najbliższego przodka, który ma pozycję inną niż static.
    element {
  position: absolute;
  top: 0;
  right: 0;
}

  4. Position: Fixed:

    • Element jest pozycjonowany względem okna przeglądarki. Pozostaje w tej samej pozycji nawet podczas przewijania strony.
    element {
  position: fixed;
  bottom: 10px;
  left: 10px;
}

  5. Position: Sticky:

    • Element przełącza się między relative i fixed w zależności od przewijania strony.
    element {
  position: sticky;
  top: 0;
}

  6. Float i Clear:

    • float umożliwia przesunięcie elementów w bok (np. w lewo lub w prawo).
    • clear określa, czy następny element ma być umieszczony poniżej elementów z float.
    element {
  float: left;
  clear: both;
}

  7. Tworzenie layoutów za pomocą CSS:

    • Flexbox:
      • Flexbox umożliwia rozmieszczenie elementów w wierszach lub kolumnach z elastycznym dostosowaniem przestrzeni.
      .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
    • Grid:
      • Grid pozwala tworzyć zaawansowane układy z podziałem na wiersze i kolumny.
      .grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
}
    • Procentowe układy:
      • Elementy mogą być rozmieszczane na stronie w oparciu o wartości procentowe, co pozwala na responsywność.
      .box {
  width: 50%;
  margin: 0 auto;
}

Dodatkowe materiały:

Ćwiczenia

Ćwiczenie 1: Pozycjonowanie względne i przesunięcia

  • Stwórz dwa elementy <div> o klasach .box1 i .box2.
  • Stylizacje:
    • .box1: pozycja względna (position: relative), przesunięcie o 20px w dół (top) i 30px w prawo (left), kolor tła, marginesy.
    • .box2: umieszczony poniżej .box1 z domyślnym pozycjonowaniem (static).

Ćwiczenie 2: Absolutne pozycjonowanie w kontenerze

  • Utwórz kontener <div class="container"> i umieść w nim dwa elementy <div> z klasami .child1 i .child2.
  • Stylizacje:
    • .container: szerokość, wysokość, kolor tła, pozycja względna (position: relative).
    • .child1: pozycja absolutna (position: absolute), ustawienia top i left na 10px, kolor tła.
    • .child2: ustawienia bottom i right na 10px.

Ćwiczenie 3: Elementy z pozycją stałą

  • Stwórz element <div> z klasą .fixed-box i umieść go na dole ekranu.
  • Stylizacje:
    • Pozycja stała (position: fixed).
    • Szerokość na 100%, wysokość 50px.
    • Tło (background-color), cień (box-shadow), odstępy wewnętrzne (padding).

Do sprawdzenia: CSS Fixed Position – W3C

Ćwiczenie 4: Warstwy elementów z z-index

  • Utwórz trzy nakładające się elementy <div> o klasach .layer1, .layer2, .layer3.
  • Stylizacje:
    • Każdy element: pozycja absolutna, różne kolory tła, różne wartości z-index (np. 1, 2, 3).
    • Przetestuj, który element jest na wierzchu.

Do sprawdzenia: CSS Z-Index – W3C

Ćwiczenie 5: Float i Clear

  • Stwórz trzy elementy <div> z klasami .float-box1, .float-box2, .float-box3.
  • Stylizacje:
    • .float-box1 i .float-box2: unosić (float) w lewo.
    • .float-box3: użyj clear: both, aby element pojawił się poniżej wcześniejszych.

Do sprawdzenia: CSS Float – W3C

Ćwiczenie 6: Sticky nagłówek

  • Stwórz nagłówek <header> z klasą .sticky-header.
  • Stylizacje:
    • Pozycja sticky, ustawienie top: 0, szerokość 100%, tło (background-color).
    • Dodaj długą treść na stronie i sprawdź, jak nagłówek zachowuje się podczas przewijania.

Do sprawdzenia: CSS Sticky – W3C

Ćwiczenie 7: Galeria obrazów z float

  • Stwórz galerię obrazów <img> umieszczonych w kontenerze <div>.
  • Stylizacje:
    • Obrazy: szerokość 30%, marginesy, unoszenie w lewo (float: left).
    • Kontener: użyj clear: both po ostatnim obrazie, aby poprawnie wyświetlić następującą treść.

Ćwiczenie 8: Pozycjonowanie menu nawigacyjnego

  • Stwórz poziome menu <nav> z elementami <a>.
  • Stylizacje:
    • Menu: pozycja absolutna, ustawione u góry strony.
    • Elementy <a>: marginesy, kolory, zmiana tła podczas najechania (:hover).

Do sprawdzenia: CSS Hover – W3C

Ćwiczenie 9: Layout z Flexbox

  • Utwórz kontener <div class="flex-container"> zawierający 4 elementy <div> o klasach .item1, .item2, .item3, .item4.
  • Stylizacje:
    • Kontener: display: flex, ustaw justify-content: space-around i align-items: center.
    • Elementy: różne kolory tła, marginesy, szerokości i wysokości.

Do sprawdzenia: CSS Flexbox – W3C

Ćwiczenie 10: Layout z Grid

  • Utwórz kontener <div class="grid-container"> zawierający 6 elementów <div> o klasach .grid-item.
  • Stylizacje:
    • Kontener: display: grid, ustaw grid-template-columns: repeat(3, 1fr) i grid-gap: 10px.
    • Elementy: różne kolory tła, marginesy, szerokości i wysokości.

Do sprawdzenia: CSS Grid – W3C

**