Нормальное позиционирование

Комментарии

Если для элемента свойство position не задано или его значение явно указано как static, элемент выводится в потоке документа как обычно. Иными словами, элементы отображаются на странице в том порядке, как они идут в исходном коде HTML. static — это значение свойства position по умолчанию, иными словами, если вы не задали для элемента position, то оно считается браузером как static.

Формально, static не является типом позиционирования, это естественное исходное состояние любого элемента. Таким образом, термины «нормальное позиционирование», «обычное позиционирование», «статичное позиционирование», «статичный элемент» указывают лишь на значение static у свойства position, поскольку позиционирования как такового нет и элемент остаётся на своём начальном месте.

Для нормального позиционирования характерны следующие особенности:

элементы на веб-странице выводятся в том порядке, как они описаны в коде HTML;
свойства left, right, top и bottom не дают никакого эффекта;
свойство z-index не работает.

В примере 1 показан вывод трёх элементов с нормальным позиционированием.

Пример 1. Вывод элементов

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>static</title>
  <style>
   .box {
    min-height: 60px; /* Минимальная высота */
    margin-bottom: 10px; /* Отступ снизу */
   }
   .box-1 {
    background: #CE242B; /* Красный фон */
   }
   .box-2 {
    background: #009D4B; /* Зелёный фон */
   }
   .box-3 {
    background: #3989C9; /* Синий фон */
   }
  </style>
 </head>
 <body>
  <div class="box box-1"></div>
  <div class="box box-2"></div>
  <div class="box box-3"></div>
 </body>
</html>

В данном примере в коде HTML перечислены элементы с классами box-1, box-2, box-3, они выводятся на веб-странице в этом же порядке (рис. 1).

Вывод элементов с нормальным позиционированием

Рис. 1. Вывод элементов с нормальным позиционированием

Само по себе значение static применяется редко, поскольку является значением по умолчанию и не требует явного указания. Оно используется на практике лишь для возврата свойства position к начальному значению. В примере 2 для элемента задано относительное позиционирование и оно сдвинуто вниз от своего исходного положения. Псевдокласс :hover отменяет относительное позиционирование и элемент возвращается в исходное положение, если навести на него курсор.

Пример 2. Использование static

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>static</title>
  <style>
   .box-1 {
    background: #CE242B; /* Красный фон */
    min-height: 60px; /* Минимальная высота */
    position: relative; /* Относительное позиционирование */
    top: 20px; /* Расстояние сверху */
   }
   .box-1:hover {
    position: static; /* Статичное позиционирование */
   }
  </style>
 </head>
 <body>
  <div class="box-1"></div>
 </body>
</html>

Перейти к заданиям

См. также

Нормальное позиционирование

Создайте веб-страницу, показанную на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Форма для входа</title>
  <style>
   body {
    background: #f5f4f1;
   }
   form {
    background: #fff;
    width: 300px;
    margin: auto;
    padding: 30px 50px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
   }
   h2 {
    text-align: center;
    font-variant: small-caps;
   }
   .form-control {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #dddddd;
   }
   .remember {
    text-align: right;
    font-style: italic;
   }
   button {
    background: #bc8e5c;
    width: 100%;
    border: none;
    color: #fff;
    padding: 10px;
   }
  </style>
 </head>
 <body>
  <form>
   <h2>Добро пожаловать!</h2>
   <p><input name="login" placeholder="Логин" class="form-control"></p>
   <p><input type="password" name="pass" placeholder="Пароль" class="form-control"></p>
   <p class="remember"><input type="checkbox" checked name="remember"> Запомнить меня</p>
   <p><button>Войти</button></p>
  </form>
 </body>
</html>

Нормальное позиционирование 2

Создайте ве-страницу, как показано на рис. 1.

Рис. 1

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   body {
    background: #f7f9fa;
   }
   section {
    width: 300px;
    font-family: Arial Helvetica, sans-serif;
    color: #777;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   }
   .content {
    text-align: center;
    padding: 10px 20px 20px;
   }
   .content h2 {
    color: #333;
    margin-top: 0;
    font-weight: normal;
   }
   .content h2::after {
    content: '';
    display: block;
    width: 30px;
    margin: 10px auto;
    border-bottom: 5px dotted #fd644a;
   }
   .content p {
    font-size: 0.8em;
   }
   .content button {
    background: #fd644a;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin-top: 10px;
    border-radius: 20px;
   }
  </style>
 </head>
 <body>
  <section>
   <img src="image/landscape.jpg" alt="">
   <div class="content">
    <h2>Туристический цикл</h2>
    <p>Большая часть территории однородно вызывает закрытый аквапарк.</p>
    <button>Подробнее</button>
   </div>
  </section>
 </body>
</html>

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 01.08.2017

Редакторы: Влад Мержевич