Это контент страницы. При прокрутке меню должно оставаться сверху. Сейчас при прокрутке меню скрывается.
Задача 1: Относительное и абсолютное позиционирование
Исправьте расположение элементов так, чтобы красный блок был в правом нижнем углу синего блока, а зеленый блок - в левом верхнем углу синего блока.
Родительский блок
Подсказка: Установите родительскому блоку позиционирование relative, а дочерним - absolute с соответствующими значениями top/right/bottom/left.
Задача 2: Управление z-index
Измените порядок наложения блоков так, чтобы красный блок был под синим, синий под зеленым, а зеленый - сверху всех. Блоки не должны менять свое положение на странице.
Блок 1 (должен быть снизу)
Блок 2 (должен быть посередине)
Блок 3 (должен быть сверху)
Подсказка: Используйте свойство z-index. Элементы с большим значением z-index отображаются поверх элементов с меньшим значением.
Задача 3: Фиксированное меню
Преобразуйте меню навигации в фиксированное, чтобы оно оставалось вверху экрана при прокрутке. Также исправьте наложение контента под меню.
Подсказка: Используйте position: fixed. Учтите, что фиксированный элемент выпадает из потока, поэтому нужно добавить отступ для контента.
Задача 4: Липкий заголовок
Сделайте заголовок таблицы "липким", чтобы при прокрутке он оставался видимым вверху области просмотра до тех пор, пока не будет прокручена вся таблица.
| Имя | Фамилия | Возраст | Город |
|---|---|---|---|
| Алексей | Иванов | 25 | Москва |
| Мария | Петрова | 30 | Санкт-Петербург |
| Иван | Сидоров | 22 | Казань |
| Ольга | Смирнова | 28 | Екатеринбург |
| Дмитрий | Кузнецов | 35 | Новосибирск |
| Анна | Васильева | 27 | Ростов-на-Дону |
| Сергей | Попов | 32 | Краснодар |
| Елена | Федорова | 29 | Воронеж |
Подсказка: Используйте position: sticky. Не забудьте указать значение top.
Задача 5: Наложение элементов с разным z-index
Создайте эффект многослойного наложения. Расположите элементы так, чтобы получилась "стопка" из блоков с тенями. Центрируйте всю композицию относительно родительского контейнера.
Слой 1 (должен быть внизу)
Слой 2
Слой 3
Слой 4 (должен быть сверху)
Подсказка: Используйте комбинацию relative и absolute позиционирования вместе с z-index. Для центрирования можно использовать transform: translate(-50%, -50%) с top: 50% и left: 50%.