Применение относительного позиционирования в CSS

Введение

В этом практическом занятии вы научитесь применять относительное позиционирование в CSS, создав веб-верстку с двумя изображениями. Практическое занятие проведет вас через настройку структуры проекта HTML, создание базового CSS-стиля и реализацию техник относительного позиционирования для размещения изображений.

Вы начнете с создания директории проекта, инициализации HTML-файла с заглушками изображений и загрузки примеров изображений. Затем вы разработаете CSS-стили для определения макета и позиционирования этих изображений с использованием относительного позиционирования, которое позволяет вам调整ить позицию элементов относительно их нормального потока документа без влияния на макеты других элементов.

Настройка структуры проекта HTML

В этом шаге вы настроите базовую структуру проекта HTML для изучения относительного позиционирования в CSS. Мы создадим простую директорию проекта и инициализируем необходимые файлы для нашего эксперимента с веб-версткой.

Во - первых, перейдите в директорию проекта:

cd ~/project

Создайте новую директорию для нашего проекта по позиционированию в CSS:

mkdir css - positioning
cd css - positioning

Теперь создайте базовые файлы проекта с использованием WebIDE:

Создайте HTML - файл с именем index.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF - 8" />
    <title>CSS Relative Positioning</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="container">
      <img src="left - image.jpg" alt="Left Image" class="left - image" />
      <img src="right - image.jpg" alt="Right Image" class="right - image" />
    </div>
  </body>
</html>

Загрузите примеры изображений для проекта:

wget https://labex.io/sample - left - image.jpg -O left - image.jpg
wget https://labex.io/sample - right - image.jpg -O right - image.jpg

Пример вывода:

--2024 - xx - xx xx:xx:xx--  https://labex.io/sample - left - image.jpg
Resolving labex.io (labex.io)...
Downloading sample images...

Это настройка создает базовую HTML - структуру с заглушками для изображений и готовит проект для экспериментов по позиционированию в CSS в следующих шагах.

Создать базовый CSS - стилизацию

В этом шаге вы создадите базовый CSS - стиль для настройки основных стилей вашей веб - страницы. CSS (Cascading Style Sheets) позволяет вам контролировать макет, внешний вид и позиционирование HTML - элементов.

Перейдите в директорию проекта:

cd ~/project/css - positioning

Создайте новый CSS - файл с именем styles.css в WebIDE:

/* Базовый сброс и стили контейнера */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
}

/* Начальные стили изображений */
.left - image,
.right - image {
  width: 200px;
  height: auto;
  border: 1px solid #666;
}

Разберём CSS:

Селектор * применяет сброс, чтобы удалить стандартные отступы и заполнения
.container создает центрированный контейнер с рамкой
.left - image и .right - image задают начальные размеры изображений и добавляют рамку

Пример вывода при просмотре в браузере:

[Центрированный контейнер с рамкой, содержащий два изображения одинакового размера]

Этот базовый стиль обеспечивает основу для нашего эксперимента с относительным позиционированием. В следующих шагах мы изменим эти стили, чтобы продемонстрировать методы относительного позиционирования.

Реализовать относительное позиционирование для левого изображения

В этом шаге вы научитесь использовать относительное позиционирование для перемещения левого изображения внутри своего исходного потока документа. Относительное позиционирование позволяет вам调整ить позицию элемента относительно его нормальной позиции без влияния на другие элементы.

Откройте файл styles.css в WebIDE и добавьте следующий CSS для левого изображения:

.left - image {
  position: relative;
  top: 20px; /* Переместите на 20 пикселей вниз */
  left: 50px; /* Переместите на 50 пикселей вправо */
  background - color: #f0f0f0; /* Добавьте светой фон для наглядности */
}

Основные моменты относительно относительного позиционирования:

position: relative; включает относительное позиционирование
top перемещает элемент вниз
left перемещает элемент вправо
Исходное пространство элемента сохраняется
Другие элементы не受到 этого перемещения

Пример визуального вывода:

[Левое изображение сдвинутым на 20 пикселей вниз и 50 пикселей вправо,
 сохраняя свое исходное пространство макета]

Относительное позиционирование позволяет вам точно настроить расположение элементов без нарушения общего макета страницы.

Реализовать относительное позиционирование для правого изображения

В этом шаге вы примените относительное позиционирование к правому изображению, демонстрируя, как перемещать элементы независимо с использованием CSS. Мы будем использовать разные значения позиционирования, чтобы показать гибкость относительного позиционирования.

Откройте файл styles.css в WebIDE и добавьте следующий CSS для правого изображения:

.right - image {
  position: relative;
  bottom: 30px; /* Переместите на 30 пикселей вверх */
  right: -40px; /* Переместите на 40 пикселей влево */
  background - color: #e0e0e0; /* Добавьте светой фон для наглядности */
}

Основные различия в позиционировании:

bottom перемещает элемент вверх
right со значением в отрицательном направлении перемещает элемент влево
Изображение сохраняет свое исходное пространство макета
Другие элементы не受到 этого перемещения

Пример визуального вывода:

[Правое изображение сдвинутым на 30 пикселей вверх и 40 пикселей влево,
 сохраняя свое исходное пространство макета]

Этот пример демонстрирует, как можно использовать разные свойства позиционирования для точной настройки расположения элементов с использованием относительного позиционирования.

Проверить позиционирование и макет

В этом финальном шаге вы проверите и подтвердите методы относительного позиционирования, примененные к изображениям. Мы добавим некоторые финальные штрихи, чтобы улучшить визуальное понимание того, как работает относительное позиционирование.

Обновите файл styles.css полным стилем, чтобы подчеркнуть позиционирование:

.container {
  width: 100%;
  max-width: 800px;
  margin: 50px auto;
  position: relative;
  border: 2px solid #333;
  padding: 20px;
  text-align: center;
}

.left - image,
.right - image {
  width: 200px;
  height: auto;
  border: 3px solid #666;
  transition: transform 0.3s ease;
}

.left - image {
  position: relative;
  top: 20px;
  left: 50px;
  background - color: #f0f0f0;
}

.right - image {
  position: relative;
  bottom: 30px;
  right: -40px;
  background - color: #e0e0e0;
}

/* Добавьте эффект наведения, чтобы визуализировать позиционирование */
.left - image:hover,
.right - image:hover {
  transform: scale(1.05);
}

Основные точки проверки:

Изображения позиционируются относительно своих исходных мест
Контейнер сохраняет единый макет
Эффекты наведения помогают визуализировать позиционирование

Пример визуального вывода:

[Два изображения, расположенных по - разному внутри центрированного контейнера,
 с незначительными эффектами наведения, чтобы подчеркнуть их позиции]

Этот финальный стиль демонстрирует силу относительного позиционирования при создании гибких и динамичных макетов.

Резюме

В этом практическом занятии участники научились применять относительное позиционирование в CSS, создавая структурированный веб - проект с нуля. Процесс включал настройку директории проекта HTML, создание файла index.html с заглушками для изображений и загрузку примерных изображений для демонстрации методов позиционирования.

Практическое занятие помогло участникам создать базовый CSS - стиль, установить основные принципы стилизации и подготовить основу для реализации относительного позиционирования для левого и правого изображений. Следуя пошаговым инструкциям, участники приобрели практический опыт в управлении элементами веб - макета и поняли, как позиционирование в CSS может быть использовано для управления расположением изображений внутри контейнера.