Создать макет с фиксированным позиционированием в CSS

Введение

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

Следуя пошаговым инструкциям, вы приобретете практические навыки в использовании свойств позиционирования CSS, таких как position: fixed, и узнаете, как точно управлять расположением элементов с использованием свойств top, bottom, left и right. Практическое занятие дает возможность получить опыт в создании адаптивных и визуально согласованных макетов, которые сохраняют свое положение независимо от прокрутки страницы.

Разберитесь с концепцией фиксированного позиционирования

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

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

Рассмотрим базовую концепцию на простом примере:

<!doctype html>
<html>
  <head>
    <style>
      .fixed-element {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #f1f1f1;
        padding: 10px;
        border: 1px solid #ddd;
      }
    </style>
  </head>
  <body>
    <div class="fixed-element">I'm a fixed element that stays in place!</div>
    <div style="height: 2000px;">
      Scroll down to see the fixed element remain in position
    </div>
  </body>
</html>

Основные характеристики фиксированного позиционирования:

Использует position: fixed; в CSS
Позиционируется относительно окна браузера
Не двигается при прокрутке страницы
Может быть точно размещен с использованием свойств top, bottom, left и right

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

.fixed-element всегда будет находиться на 20 пикселей от верхнего и правого края экрана
Даже если вы прокрутите вниз, этот элемент остается в одном и том же положении на экране

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

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

Сначала перейдите в каталог проекта и создайте необходимые файлы:

cd ~/project
mkdir fixed-positioning-demo
cd fixed-positioning-demo

Теперь создайте базовую структуру файлов HTML:

touch index.html
touch styles.css

Откройте файл index.html и добавьте следующую базовую структуру HTML:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>This is a sample page to demonstrate fixed positioning in CSS.</p>

      <!-- We'll add more content in subsequent steps -->
    </div>
  </body>
</html>

Создайте базовый CSS-файл styles.css с некоторыми начальными стилями:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

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

~/project/fixed-positioning-demo/
├── index.html
└── styles.css

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

Примените фиксированное позиционирование для боковых реклам

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

Обновите файл index.html, чтобы включить элементы боковых реклам:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Layout Demo</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Side Ad</h3>
      <p>This ad stays in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Side Ad</h3>
      <p>Another fixed advertisement</p>
    </div>

    <div class="content">
      <h1>Fixed Positioning Layout</h1>
      <p>Scroll down to see how the side advertisements remain fixed.</p>

      <!-- Add more content to create scrolling effect -->
      <div style="height: 2000px;">Long content to demonstrate scrolling</div>
    </div>
  </body>
</html>

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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.left-ad,
.right-ad {
  position: fixed;
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.left-ad {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.right-ad {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

Основные моменты о фиксированном позиционировании:

position: fixed; keeps the ads in a constant position
left и right свойства позиционируют рекламные объявления по сторонам экрана
top: 50% и transform: translateY(-50%) центрируют рекламные объявления по вертикали

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

Два боковых рекламных объявления будут фиксированы на экране
Рекламные объявления остаются на месте при прокрутке страницы
Рекламные объявления центрированы по вертикали на экране

Настройте расположение элементов с помощью свойств top и right

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

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

/* Previous styles remain the same */

.left-ad {
  position: fixed;
  top: 20px; /* 20 пикселей от верхнего края экрана */
  left: 20px; /* 20 пикселей от левого края экрана */
  width: 150px;
  background-color: #f4f4f4;
  padding: 10px;
  border: 1px solid #ddd;
}

.right-ad {
  position: fixed;
  top: 50%; /* Вертикально центрирован */
  right: 20px; /* 20 пикселей от правого края экрана */
  width: 150px;
  transform: translateY(-50%); /* Корректировка для идеального центрирования */
  background-color: #e4e4e4;
  padding: 10px;
  border: 1px solid #ccc;
}

.bottom-ad {
  position: fixed;
  bottom: 20px; /* 20 пикселей от нижнего края экрана */
  left: 50%; /* Горизонтально центрирован */
  width: 300px;
  transform: translateX(-50%); /* Корректировка для идеального центрирования */
  background-color: #d4d4d4;
  padding: 10px;
  text-align: center;
  border: 1px solid #bbb;
}

Обновите index.html, чтобы включить новое нижнее рекламное объявление:

<body>
  <div class="left-ad">
    <h3>Left Side Ad</h3>
    <p>Positioned 20px from top-left</p>
  </div>

  <div class="right-ad">
    <h3>Right Side Ad</h3>
    <p>Vertically centered</p>
  </div>

  <div class="bottom-ad">
    <h3>Bottom Ad</h3>
    <p>Centered at the bottom of the screen</p>
  </div>

  <div class="content">
    <h1>Fixed Positioning Layout</h1>
    <p>Explore different positioning techniques</p>

    <div style="height: 2000px;">Scroll to see fixed elements</div>
  </div>
</body>

Основные свойства позиционирования объяснены:

top: Расстояние от верхнего края экрана
right: Расстояние от правого края экрана
bottom: Расстояние от нижнего края экрана
left: Расстояние от левого края экрана
transform: Точная настройка позиционирования для идеального центрирования

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

Левое рекламное объявление: 20 пикселей от верхнего левого угла
Правое рекламное объявление: Вертикально центрировано по правой стороне
Нижнее рекламное объявление: Центрировано внизу экрана
Все элементы остаются фиксированными при прокрутке

Проверьте поведение прокрутки фиксированных элементов

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

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fixed Positioning Scroll Test</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="left-ad">
      <h3>Left Ad</h3>
      <p>I stay in place!</p>
    </div>

    <div class="right-ad">
      <h3>Right Ad</h3>
      <p>Always visible</p>
    </div>

    <div class="bottom-ad">
      <h3>Bottom Ad</h3>
      <p>Fixed at bottom</p>
    </div>

    <div class="content">
      <h1>Scrolling Behavior Demonstration</h1>

      <div class="scroll-content">
        <h2>Scroll Down to See Fixed Elements</h2>

        <!-- Create long content to enable scrolling -->
        <div class="long-content">
          <h3>Long Content Section</h3>
          <p>
            This section will allow you to scroll and observe how fixed-position
            elements remain in place.
          </p>

          <!-- Repeat paragraphs to create scrollable content -->
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in
            dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.
          </p>

          <!-- Add multiple repetitions to create significant scroll length -->
          <p>
            Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in
            nulla enim. Phasellus molestie magna non est bibendum non venenatis
            nisl tempor.
          </p>

          <!-- Repeat similar paragraphs multiple times -->
          <p>
            Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
            posuere. Praesent id metus massa, ut blandit odio.
          </p>

          <!-- Continue adding paragraphs to create scroll effect -->
          <p>
            Proin quis tortor orci. Etiam at risus et justo dignissim congue.
            Donec congue lacinia dui, a porttitor lectus condimentum laoreet.
          </p>

          <!-- More paragraphs to extend scrolling -->
          <p>
            Nunc dignissim risus id metus. Cras ornare tristique elit. Vivamus
            vestibulum nulla sit amet tristique reprehenderit.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>

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

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.long-content {
  background-color: #f9f9f9;
  padding: 20px;
}

/* Previous fixed positioning styles remain the same */

Основные наблюдения о фиксированном позиционировании:

Фиксированные элементы остаются в одном и том же положении на экране
Прокрутка не влияет на их расположение
Элементы остаются видимыми независимо от позиции прокрутки страницы

Пример поведения при прокрутке:

Левая, правая и нижняя рекламные объявления остаются неподвижными
Содержимое прокручивается за фиксированными элементами
Фиксированные элементы всегда видны на экране

Резюме

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

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