Позиционирование

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

С помощью правила position мы можем «выдернуть» блок и расположить так, как удобно. Основные значения у свойства position следующие:

  • relative (относительное позиционирование). Позволяет изменить расположение элемента относительно того места, где он был расположен до применения свойства. При этом, то место на странице, которое блок занимал ранее, останется. То есть другие блоки не будут вставать на то место.
  • ablosute (абсолютное позиционирование). «Вынимает» блок из HTML вёрстки и изменяет расположение относительно верхнего левого угла браузера. В отличии от relative, место, где располагался блок будет удалено, и другие блоки смогут занять это место.
  • fixed. Также, как и absolute данное правило «вынет» блок из HTML вёрстки и расположит его в левом верхнем углу. Отличием от абсолютного позиционирования является то, что блок будет «следовать за страницей» и всегда находится в зоне видимости пользователя. Это удобно для создания меню, которые должны следовать за пользователем.

Для управления расположением используются 4 правила CSS: top, right, left и bottom, значением которых является координаты (например в пикселях), где будет расположен блок.

<style>
  .absolute-position {
    position: ablosute;
    top: 100px;
    left: 100px;
  }
</style>

  <div class="ablosute-position">Блок с абсолютным позиционированием, который будет расположен на расстоянии 100 пикселей от верха и 100 пикселей от левого края браузера</div>

Задание

Создайте div с классом relative-position и установите относительное позиционирование. Значение top выставите в 100 пикселей и 50 пикселей значение right. Попробуйте разные значение, чтобы увидеть, как блок будет перемещаться.


Нашли ошибку? Есть что добавить? Пулреквесты приветствуютсяhttps://github.com/hexlet-basics

Упражнение доступно только авторизованным пользователям.

Пожалуйста, авторизуйтесь, это необходимо для отслеживания прогресса выполнения уроков. Если у вас ещё нет учётной записи, то сейчас самое время создать аккаунт.