Спливаючі елементи

1. Контентне vs декоративне зображення

Є два способи додати зображення на сторінку — через HTML і через CSS. Вони не взаємозамінні.

2. Фонове зображення — базовий набір властивостей

Для декоративних фонів (hero-банер, шапка з фото) майже завжди використовується один і той самий набір:

.hero {
    background-image: url("img/hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #000;
}

cover vs contain

3. position: absolute — поведінка та властивості

Коли елементу задають position: absolute, він радикально змінює поведінку:

• Ширина та висота вираховуються за кількістю контенту (а не на 100% батька)
• Елемент стає невидимим для сусідів і батьківського елемента — ніби його немає в розмітці
• Батько не враховує абсолютний елемент при розрахунку своїх розмірів
• Сусідні елементи займають його місце
• Елемент розміщується поверх звичайних блоків

Керування позицією: top, right, bottom, left

Абсолютний елемент переміщується за допомогою чотирьох властивостей:

.element {
    position: absolute;
    top: 0;     /* 0 від верхнього краю */
    left: 20px;  /* 20px від лівого краю */
}

Розтягування абсолютного елемента

Якщо ширина не задана явно, а вказано left: 0 і right: 0 — елемент розтягнеться на всю доступну ширину. Те саме працює для вертикалі з top: 0 і bottom: 0:

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

4. position: relative — збереження поведінки

На відміну від absolute, значення position: relative не змінює стандартну поведінку блока:

• Блочний елемент залишається блочним, рядковий — рядковим
• Елемент займає місце в потоці документа, як і раніше
• Сусіди та батько його враховують у розрахунках

Два головних призначення position: relative

1. Активація z-index — без position властивість z-index не працює
2. Контекст позиціювання — батьківський елемент з position: relative стає точкою відліку для дочірніх position: absolute

5. Контекст позиціювання (relative + absolute)

Елемент з position: absolute вираховує свої top/left/right/bottom від найближчого батьківського елемента з position: relative (або absolute, fixed).

/* Батько — точка відліку */
.parent {
    position: relative;
}

/* Дитина — позиціюється відносно .parent */
.child {
    position: absolute;
    top: 0;
    right: 0;
}

Алгоритм пошуку контексту:

1. Перевірити свого безпосереднього батька — чи є в нього position: relative?
2. Якщо ні — перевірити наступного батька вгору по DOM
3. Якщо жоден батько не має position — позиціювання відбувається відносно viewport

6. z-index — порядок накладання

Властивість z-index керує тим, який елемент відображається поверх іншого при накладанні.

• Більше значення — елемент ближче до користувача (поверх інших)
• Працює лише з елементами, у яких задано position (relative, absolute, fixed)
• Без z-index — порядок визначається позицією в HTML (елемент нижче в коді — вище в накладанні)
• При однаковому z-index — діє правило порядку в HTML

/* Без z-index: третій елемент поверх усіх */
.box-1 { position: absolute; }
.box-2 { position: absolute; }
.box-3 { position: absolute; }

/* З z-index: перший елемент поверх усіх */
.box-1 { position: absolute; z-index: 2; }

7. Техніка затемнення фону (overlay)

Класична задача: фоновий банер із затемненням і білим текстом поверх. Затемнення обов'язково робимо через CSS, а не в графічному редакторі — бо зображення може бути динамічним (змінюватись через CMS).

Ідея

1. Створити псевдоелемент ::after
2. Розтягнути його на весь блок через position: absolute
3. Задати напівпрозорий чорний фон через rgba()
4. Текст винести на передній план через z-index

Повний приклад

/* HTML: <section class="hero"><div class="hero__content">...</div></section> */

/* 1. Батьківський блок */
.hero {
    position: relative;         /* контекст для ::after */
    background-image: url("img/hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: #000;
}

/* 2. Затемнюючий шар */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 3. Контент поверх затемнення */
.hero__content {
    position: relative;         /* активує z-index */
    z-index: 1;                 /* вище за ::after */
    color: #fff;
}

8. text-transform — зміна регістру через CSS

Заголовок великими літерами потрібно писати звичайним текстом у HTML, а трансформувати через CSS:

.hero__title {
    text-transform: uppercase;
}

9. Блок соціальних мереж — правильна розмітка

Блок із посиланнями на соцмережі — це список посилань. Іконки — це декоративні зображення, а не контент.

Розмітка

<address class="social">
    <ul class="social__list">
        <li class="social__item">
            <a href="https://facebook.com/…" class="social__link social__link--facebook">
                <span class="social__text">Facebook</span>
            </a>
        </li>
        <li class="social__item">
            <a href="https://instagram.com/…" class="social__link social__link--instagram">
                <span class="social__text">Instagram</span>
            </a>
        </li>
        <li class="social__item">
            <a href="https://youtube.com/…" class="social__link social__link--youtube">
                <span class="social__text">YouTube</span>
            </a>
        </li>
    </ul>
</address>

Чому саме так?

• <address> — семантичний тег для контактної інформації (адреса, телефон, соцмережі). Не для кнопок «Поділитися»
• Два класи на кожному посиланні: спільний (social__link) — для загальних стилів; унікальний (social__link--facebook) — для індивідуальної іконки та кольору
• Текст у <span> — приховується візуально, але доступний для скрінрідерів та пошукових систем

CSS — два класи

/* Загальні стилі — однаковий розмір, форма, background */
.social__link {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: #3b5998;  /* базовий колір */
}

/* Унікальні стилі — іконка та колір */
.social__link--facebook  { background-image: url("img/fb.svg"); }
.social__link--instagram {
    background-image: url("img/ig.svg");
    background-color: #e1306c;
}
.social__link--youtube {
    background-image: url("img/yt.svg");
    background-color: #ff0000;
}

10. Тег <address> — стиль за замовчуванням

Тег <address> має стиль за замовчуванням: font-style: italic. Якщо курсив не потрібен — скиньте його:

address {
    font-style: normal;
}

11. margin vs padding — коли що використовувати

12. Типові випадки position: absolute

position: absolute — не для розміщення основного контенту на сторінці. Основні елементи повинні бути звичайними блоками з margin, padding, Flexbox або Grid.

Типові випадки для absolute:

• Затемнюючий overlay — маска поверх фону (розділ 7)
• Елемент, що виступає за межі свого блока (наприклад, фото, що «виглядає» з секції)
• Декоративні іконки — додаються через ::before/::after, позиціюються абсолютно
• Бейджі та мітки — «Новинка», «-20%» на кутку карточки товару
• Випадаючі меню — не повинні зсувати основний контент

13. Робота з макетами — інструменти та вимірювання

Для верстки за макетом потрібно вміти вимірювати відстані, кольори та розміри. Сучасні інструменти:

Основи роботи з PSD у Photoshop

• Одиниці вимірювання: в налаштуваннях поставте пікселі (Edit → Preferences → Units & Rulers)
• Відкривайте саме .psd файл, а не .jpg/.png — лише в PSD є шари
• Шари (Layers): кожен елемент макету — окремий шар. Панель шарів — справа
• Автовибір: інструмент у верхньому лівому куті — клацаєте на елемент у макеті, підсвічується його шар
• Напрямні (Guides): тягніть з лінійки на макет для точних вимірювань
• Лінійка (Ruler tool): вимірює відстань між двома напрямними з точністю до пікселя

14. Типи шарів у Photoshop

15. Підсумкова таблиця