Урок 8. Позиціювання: Static, Relative, Absolute, Fixed, Sticky

План уроку: Позиціювання: Static, Relative, Absolute, Fixed, Sticky (25-30 хвилин)

1. Вступ до позиціювання (5 хвилин)

• Що таке позиціювання?

  • Позиціювання дозволяє контролювати, де саме елементи будуть розташовані на сторінці.
  • Використання позиціювання допомагає досягти складних макетів і управлінь.
    
    

• Основні типи позиціювання:

  • static
  • relative
  • absolute
  • fixed
  • sticky

2. Позиціювання Static (5 хвилин)

• Опис:

  • static — це значення за замовчуванням для всіх елементів. Елементи з position: static; розташовуються у звичайному потоці документа, і не підлягають зміщенню з використанням властивостей top, right, bottom, left.

• Приклад:

  .static {
      position: static;
      background-color: lightblue;
  }
  

3. Позиціювання Relative (5 хвилин)

• Опис:

  • relative — елементи позиціонуються відносно свого початкового місця в потоці документа. Використання top, right, bottom, left зміщує елемент від його початкової позиції.
    
    

• Приклад:

  .relative {
      position: relative;
      top: 10px; /* Зсув вниз на 10 пікселів */
      left: 20px; /* Зсув вправо на 20 пікселів */
      background-color: lightgreen;
  }
  

4. Позиціювання Absolute (5 хвилин)

• Опис:

  • absolute — елементи позиціонуються відносно найближчого предка, у якого є позиція (не static). Якщо такого предка немає, елемент позиціонується відносно вікна браузера.
    
    

• Приклад:

  .absolute {
      position: absolute;
      top: 30px; /* Зсув від верхньої частини контейнера */
      right: 20px; /* Зсув від правої частини контейнера */
      background-color: lightcoral;
  }
  

5. Позиціювання Fixed (5 хвилин)

• Опис:

  • fixed — елементи фіксуються на екрані, незалежно від прокрутки. Вони позиціонуються відносно вікна браузера.
    
    

• Приклад:

  .fixed {
      position: fixed;
      bottom: 10px; /* Фіксація на 10 пікселів від низу */
      left: 20px; /* Фіксація на 20 пікселів від лівої частини */
      background-color: lightgoldenrodyellow;
  }
  

6. Позиціювання Sticky (5 хвилин)

• Опис:

  • sticky — елементи ведуть себе як relative до певної точки прокрутки, після якої вони стають фіксованими. Цей тип позиціювання корисний для заголовків, які повинні залишатися видимими під час прокручування.
    
    

• Приклад:

• .sticky {
      position: sticky;
      top: 0; /* Залишається на верхній частині контейнера */
      background-color: lightgray;
  }
  

7. Приклади та вправи (5 хвилин)

• Практичне завдання:
  • Створіть HTML-сторінку, яка містить кілька блоків з різними способами позиціювання. Додайте коментарі, щоб пояснити, як працює кожен тип позиціювання.

HTML (index.html):

CSS (styles.css):

8. Підсумок уроку (5 хвилин)

• Що повторити:

  • Різниця між типами позиціювання: static, relative, absolute, fixed, sticky.
  • Як і де використовувати різні види позиціювання для досягнення бажаного ефекту.
    
    

• Запитання для обговорення:

  • Коли краще використовувати absolute, а коли relative?
  • Які є переваги позиціювання sticky у порівнянні з іншими?
    
    

Домашнє завдання

• Створіть сторінку, на якій розміщені елементи з різними способами позиціювання. Включіть коментарі, пояснюючи, як кожен тип позиціювання впливає на розташування елементів.
  
  Ось приклад сторінки, що демонструє різні способи позиціювання елементів у CSS. У коді ви знайдете коментарі, які пояснюють, як кожен тип позиціювання впливає на розташування елементів.
  
  
  

  HTML (index.html)

  Показати / Приховати текст
  Увага! У Вас немає прав для перегляду прихованого тексту.
  
  
  
  

  CSS (styles.css)

  Показати / Приховати текст
  Увага! У Вас немає прав для перегляду прихованого тексту.

Опис елементів:

1. Static Block: Цей блок не має зміщення і розташовується у звичайному потоці документа.
2. Relative Block: Зміщений на 10 пікселів вниз і 20 пікселів вправо від своєї початкової позиції.
3. Absolute Block: Розташовується на 30 пікселів від верхньої частини контейнера та 20 пікселів від правої частини.
4. Fixed Block: Залишається на одному місці навіть при прокручуванні сторінки, фіксуючись на 10 пікселів від низу.
5. Sticky Block: Спочатку позиціонується як relative, а потім, коли досягає верхньої частини контейнера, стає fixed.

Як запустити:

1. Створіть два файли: index.html та styles.css.
2. Скопіюйте відповідний код у файли.
3. Відкрийте index.html у вашому веб-браузері, щоб побачити, як різні способи позиціювання впливають на розташування елементів.

Цей простий проект допоможе зрозуміти, як працюють різні способи позиціювання в CSS.

Цей урок надасть учням чітке уявлення про різні типи позиціювання у CSS, що дозволить їм гнучко і креативно розташовувати елементи на веб-сторінках.