Размещайте элементы абсолютно в CSS

CSSCSSBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

Настройка проекта

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

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

cd ~/project
mkdir css-positioning-lab
cd css-positioning-lab

Теперь создадим базовую структуру проекта. Создадим файл index.html и директорию styles, чтобы организовать наши CSS-файлы:

mkdir styles
touch index.html styles/main.css

Проверим структуру директорий:

tree

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

.
├── index.html
└── styles
    └── main.css

Откройте файл index.html в WebIDE. Добавим базовую структуру HTML5, чтобы подготовиться к нашей лабораторной работе по позиционированию с использованием CSS:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <!-- Добавим содержимое в следующих шагах -->
  </body>
</html>

Аналогично откройте файл styles/main.css и добавьте базовый сброс стилей, чтобы убрать стандартные стили браузера:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

Загрузка необходимых изображений

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

Сначала перейдите в каталог проекта и создайте папку для изображений:

cd ~/project/css-positioning-lab
mkdir images
cd images

Теперь загрузим несколько примеров изображений. Мы будем использовать заглушки изображений от Lorem Picsum, которая предоставляет случайные изображения для целей демонстрации:

wget https://picsum.photos/200/300?random=1 -O image1.jpg
wget https://picsum.photos/200/300?random=2 -O image2.jpg
wget https://picsum.photos/200/300?random=3 -O image3.jpg

Проверим загруженные изображения:

ls -l

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

total 180
-rw-r--r-- 1 labex labex 59973 Jun  1 10:00 image1.jpg
-rw-r--r-- 1 labex labex 61245 Jun  1 10:00 image2.jpg
-rw-r--r-- 1 labex labex 59678 Jun  1 10:00 image3.jpg

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

Создание структуры HTML

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

Откройте файл index.html в WebIDE и замените его содержимое следующим кодом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img src="images/image1.jpg" alt="Image 1" class="positioned-image" />
        <img src="images/image2.jpg" alt="Image 2" class="positioned-image" />
        <img src="images/image3.jpg" alt="Image 3" class="positioned-image" />
      </div>
    </div>
  </body>
</html>

Теперь обновите файл styles/main.css, чтобы настроить базовый стиль для нашей демонстрации позиционирования:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid red;
}

Разберём структуру HTML:

  • Мы создали контейнер div с классом positioning-container
  • Внутри него есть div image-wrapper
  • Добавлены три изображения, каждое с классом positioned-image

CSS предоставляет базовую настройку:

  • Контейнер имеет фиксированный размер с рамкой
  • position: relative применяется к контейнеру
  • Изображения имеют фиксированный размер и красную рамку для видимости

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

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

Откройте файл styles/main.css и измените CSS, чтобы применить абсолютное позиционирование к изображениям:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.positioning-container {
  width: 500px;
  height: 500px;
  border: 2px solid #333;
  position: relative;
  margin: 50px auto;
}

.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.positioned-image {
  width: 200px;
  height: 300px;
  border: 2px solid red;
  position: absolute;
}

/* Позиционирование для отдельных изображений */
#image1 {
  top: 0;
  left: 0;
}

#image2 {
  top: 100px;
  right: 0;
}

#image3 {
  bottom: 0;
  left: 150px;
}

Теперь обновите файл index.html, чтобы добавить уникальные идентификаторы к изображениям:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Absolute Positioning Lab</title>
    <link rel="stylesheet" href="styles/main.css" />
  </head>
  <body>
    <div class="positioning-container">
      <div class="image-wrapper">
        <img
          src="images/image1.jpg"
          alt="Image 1"
          id="image1"
          class="positioned-image"
        />
        <img
          src="images/image2.jpg"
          alt="Image 2"
          id="image2"
          class="positioned-image"
        />
        <img
          src="images/image3.jpg"
          alt="Image 3"
          id="image3"
          class="positioned-image"
        />
      </div>
    </div>
  </body>
</html>

Основные моменты о абсолютном позиционировании:

  • position: absolute выносит элемент из нормального потока документа
  • Позиционируется относительно ближайшего позиционированного предка (в данном случае .positioning-container)
  • Свойства top, bottom, left и right контролируют точное размещение
  • Каждое изображение размещается по-разному, чтобы продемонстрировать гибкость абсолютного позиционирования

Пример макета:

  • Первое изображение (image1) размещено в верхнем левом углу
  • Второе изображение (image2) размещено на 100px от верха, выровнено по правой стороне
  • Третье изображение (image3) размещено внизу, на 150px от левого края

Проверить макет с абсолютным позиционированием

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

Рассмотрим основные аспекты абсолютного позиционирования, которое мы реализовали:

  1. Позиционирование контейнера
.positioning-container {
  position: relative; /* Создает контекст позиционирования */
  width: 500px;
  height: 500px;
}
  1. Позиционирование изображений
.positioned-image {
  position: absolute; /* Выносит изображения из нормального потока документа */
  width: 200px;
  height: 300px;
}

#image1 {
  top: 0;
  left: 0;
} /* Верхний левый угол */
#image2 {
  top: 100px;
  right: 0;
} /* 100px от верха, выровнено по правой стороне */
#image3 {
  bottom: 0;
  left: 150px;
} /* Нижний, 150px от левого края */

Обратите внимание, как изображения размещаются:

  • Каждое изображение размещается точно внутри контейнера размером 500x500px
  • Изображения не накладываются на границы контейнера
  • Позиционирование контролируется свойствами top, bottom, left и right

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

Резюме

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

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