/
ikurakin
/
Position_on_HTML_and_CSS
Обзор
Документация
Войти
/
ikurakin
/
Position_on_HTML_and_CSS
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
139 строк
9 KB
Куракин Илья
Исходные файлы проекта
27 янв 2026, 21:21
Верифицирован
27 янв 2026, 21:21
b0888d0
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Практикум по CSS-позиционированию</title> <link rel="stylesheet" href="style.css"> </head> <body> <header class="header"> <h1>Практикум: CSS-позиционирование</h1> </header> <main class="container"> <!-- Задача 1: Relative и Absolute позиционирование --> <section class="task task-1"> <h2>Задача 1: Относительное и абсолютное позиционирование</h2> <p>Исправьте расположение элементов так, чтобы красный блок был в правом нижнем углу синего блока, а зеленый блок - в левом верхнем углу синего блока.</p> <div class="task-content"> <div class="parent-box"> <div class="box absolute-box red"></div> <div class="box absolute-box green"></div> <div class="box relative-box blue"> <span>Родительский блок</span> </div> </div> <div class="task-hint"> <p><strong>Подсказка:</strong> Установите родительскому блоку позиционирование relative, а дочерним - absolute с соответствующими значениями top/right/bottom/left.</p> </div> </div> </section> <!-- Задача 2: Z-index и наложение элементов --> <section class="task task-2"> <h2>Задача 2: Управление z-index</h2> <p>Измените порядок наложения блоков так, чтобы красный блок был под синим, синий под зеленым, а зеленый - сверху всех. Блоки не должны менять свое положение на странице.</p> <div class="task-content"> <div class="z-index-container"> <div class="z-box red z-box-1">Блок 1 (должен быть снизу)</div> <div class="z-box blue z-box-2">Блок 2 (должен быть посередине)</div> <div class="z-box green z-box-3">Блок 3 (должен быть сверху)</div> </div> <div class="task-hint"> <p><strong>Подсказка:</strong> Используйте свойство z-index. Элементы с большим значением z-index отображаются поверх элементов с меньшим значением.</p> </div> </div> </section> <!-- Задача 3: Fixed позиционирование --> <section class="task task-3"> <h2>Задача 3: Фиксированное меню</h2> <p>Преобразуйте меню навигации в фиксированное, чтобы оно оставалось вверху экрана при прокрутке. Также исправьте наложение контента под меню.</p> <div class="task-content"> <nav class="main-nav"> <a href="#" class="nav-item">Главная</a> <a href="#" class="nav-item">О нас</a> <a href="#" class="nav-item">Услуги</a> <a href="#" class="nav-item">Контакты</a> </nav> <div class="content"> <p>Это контент страницы. При прокрутке меню должно оставаться сверху. Сейчас при прокрутке меню скрывается.</p> <div class="content-placeholder"></div> <div class="content-placeholder"></div> <div class="content-placeholder"></div> </div> <div class="task-hint"> <p><strong>Подсказка:</strong> Используйте position: fixed. Учтите, что фиксированный элемент выпадает из потока, поэтому нужно добавить отступ для контента.</p> </div> </div> </section> <!-- Задача 4: Sticky позиционирование --> <section class="task task-4"> <h2>Задача 4: Липкий заголовок</h2> <p>Сделайте заголовок таблицы "липким", чтобы при прокрутке он оставался видимым вверху области просмотра до тех пор, пока не будет прокручена вся таблица.</p> <div class="task-content"> <div class="table-container"> <table class="data-table"> <thead> <tr> <th>Имя</th> <th>Фамилия</th> <th>Возраст</th> <th>Город</th> </tr> </thead> <tbody> <tr><td>Алексей</td><td>Иванов</td><td>25</td><td>Москва</td></tr> <tr><td>Мария</td><td>Петрова</td><td>30</td><td>Санкт-Петербург</td></tr> <tr><td>Иван</td><td>Сидоров</td><td>22</td><td>Казань</td></tr> <tr><td>Ольга</td><td>Смирнова</td><td>28</td><td>Екатеринбург</td></tr> <tr><td>Дмитрий</td><td>Кузнецов</td><td>35</td><td>Новосибирск</td></tr> <tr><td>Анна</td><td>Васильева</td><td>27</td><td>Ростов-на-Дону</td></tr> <tr><td>Сергей</td><td>Попов</td><td>32</td><td>Краснодар</td></tr> <tr><td>Елена</td><td>Федорова</td><td>29</td><td>Воронеж</td></tr> </tbody> </table> </div> <div class="task-hint"> <p><strong>Подсказка:</strong> Используйте position: sticky. Не забудьте указать значение top.</p> </div> </div> </section> <!-- Задача 5: Комбинированная задача --> <section class="task task-5"> <h2>Задача 5: Наложение элементов с разным z-index</h2> <p>Создайте эффект многослойного наложения. Расположите элементы так, чтобы получилась "стопка" из блоков с тенями. Центрируйте всю композицию относительно родительского контейнера.</p> <div class="task-content"> <div class="stack-container"> <div class="layer layer-1">Слой 1 (должен быть внизу)</div> <div class="layer layer-2">Слой 2</div> <div class="layer layer-3">Слой 3</div> <div class="layer layer-4">Слой 4 (должен быть сверху)</div> </div> <div class="task-hint"> <p><strong>Подсказка:</strong> Используйте комбинацию relative и absolute позиционирования вместе с z-index. Для центрирования можно использовать transform: translate(-50%, -50%) с top: 50% и left: 50%.</p> </div> </div> </section> </main> <footer class="footer"> <p>Практическое задание по дисциплине "Разработка Web-страниц"</p> <p>Тема: Позиционирование элементов. CSS-механика позиционирования.</p> </footer> </body> </html>