2.8 Позиціювання елементів веб-сторінки за допомогою стилів

Позиціювання елемента (position) - це розміщення його в певному місці сторінки.

Значення властивість position:

    • position:static - стандартне позиціювання елемента, значення за замовчуванням;

    • position:fixed - елементи фіксовані і не змінюють положення при прокручуванні.

    • position:relative - елемент позиціюється щодо його позиції за замовчуванням. Основна мета відносного позиціювання полягає не в тому, щоб перемістити елемент, а в тому, щоб встановити нову точку прив'язки для абсолютного позиціювання вкладених в нього елементів;

    • position:absolute - елемент переміщуються щодо кордонів елемента-контейнера, якщо у контейнері встановлена властивість position: relative;

Не можна одночасно застосовувати властивість float і будь-який тип позиціювання, крім static (тобто тип за замовчуванням).

Детальніше про позиціювання

Завдання 1. Змініть стилі у файлі Тема_2-8-1.html.

  1. Вирівняйте всі три нижні блоки за верхнім краєм.

  2. Змініть радіус заокруглення.

  3. Зробіть поля-відступи для тексту у центральному блоці

  4. Забезпечте, щоб блоки не накладалися один на другий при зміні розмірів вікна.

  5. Задайте вирівнювання заголовків за центром.

Підказки

  • Для вставки малюнка у блок необхідно вписати

    • background-image: url(images.jpg);

    • або background-image: url(images/images.jpg);

  • Масштабування background-size: cover;

  • Пригадайте властивості блокових елементів тут.