CSS - Позиционирование блочных элементов

Блочный элемент в HTML –это такой элемент, который занимает по умолчанию всю ширину родительского элемента. Родительским элементом может быть другой блочный элемент, или окно браузера. Блочному элементу с помощью свойств CSS можно задать ширину (width) и высоту (height). Позиционированием блочных элементов называется процесс их расположения внутри окна браузера и относительного друга с помощью CSS свойств position, left, top, right и bottom. Свойство CSS position предназначено для задания одного из четырёх доступных видов позиционирования: static (по умолчанию), absolute (абсолютное), fixed (фиксированное) и relative (относительное). Остальные CSS свойства, а именно left, top, right и bottom предназначены для задания расстояний относительно левого, верхнего, правого и нижнего края родительского элемента. Также блочные элементы при задании определенных свойств могут накладываться друг друга, и данную возможность то же можно использовать на сайтах.

Позиционирование по умолчанию (static)

Если вы не указали position у блочного элемента или указали static, что одно и то же, то в таком случае блочные элементы располагаются по порядку. Причем следующий блок (например: красный) располагается с новой строки. Так же на данное позиционирование не действует задание расстояний left, top, right и bottom.

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div>
  <div style="width: 300px; height: 150px; border: 1px solid black; background: red;"></div>
</body>
Статичное позиционирование блоков

Абсолютное позиционирование (absolute)

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

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div>
  <div style="width: 300px; height: 200px; position: absolute; top: 50px; left: 100px; border: 1px solid black; background:red;"></div>
</body>
Блок с абсолютным  позиционированием

Фиксированное позиционирование (fixed)

Фиксированное позиционирование отличается от других видов позиционирования и не перемещается вместе с контентом при скроллинге страницы. Блочные элементы с фиксированным позиционированием привязываются с помощью свойств left, top, right и bottom к краям окна браузера. Фиксированное позиционирование применяется для создания фреймовых интерфейсов (окно браузера делится на несколько областей), фиксированного меню, фиксированного подвала сайта и "постоянных" блоков (перечень ссылок, социальные кнопки и т.д.).

<body>
  <div style="width: 200px; height: 2000px; border: 1px solid black; background: green;"></div>
  <div style="width: 600px; height: 200px; position: fixed; top: 100px; left: 100px; border: 1px solid black; background:red;"></div>
</body>
Блок с фиксированным позиционированием

Относительное позиционирование (relative)

Относительное позиционирование задаётся с помощью задания расстояний left, top, right и bottom относительно его текущего положения.

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background: green;"></div>
  <div style="width: 300px; height: 200px; position: relative; top: 50px; left: 100px; border: 1px solid black; background: red;"></div>
</body>
Блок с относительным  позиционированием

Однако такое положение блока можно создать и с помощью свойства margin (отступы).

<body>
  <div style="width: 200px; height: 100px; border: 1px solid black; background:green;"></div>
  <div style="width: 300px; height: 200px; margin-top: 50px; margin-left: 100px; border: 1px solid black; background: red;"></div>
</body>

Относительное позиционирование не интересно использовать само по себе, оно в основном применяется вместе с абсолютным позиционированием.

Рассмотрим варианты:

  1. Если расположить блоки с абсолютным позиционированием в блок с относительным, то расстояния будут уже задаваться не от края окна браузера, а от границ относительного блока.
    <body>
    <!-- Зелёный блок с относительным позиционированием -->
    <div style="width: 400px; height:400px; position:relative; top:50px; left:50px; border: 1px solid black; background:green;">
      <!-- Красный блок с абсолютным позиционированием -->
      <div style="width: 100px; height:100px; position:absolute; top:50px; left:50px; border: 1px solid black; background:red;"></div>
      <!-- Синий блок с абсолютным позиционированием -->
      <div style="width: 100px; height:100px; position:absolute; bottom:50px; right:50px; border: 1px solid black; background:blue;"></div>
    </div>
    </body>
    
    Расположение блоков с абсолютным позиционированием в относительном блоке
  2. Например: для создания фиксированных макетов состоящих из 3 блоков, выровненных по верхнему краю. Установим высоту "400px" относительному блоку для наглядности .
  3. <body>
    <div style="width: 800px; height:400px; position:relative; border: 1px solid black; background:green;">
      <div style="width: 200px; height:200px; position:absolute; left:0px; border: 1px solid black; background:red;">Левый блок</div>
      <div style="width: 400px; height:200px; position:absolute; left:200px; border: 1px solid black; background:blue;">Основной блок</div>
      <div style="width: 200px; height:200px; position:absolute; left:600px; border: 1px solid black; background:red;">Правый блок</div>
    </div>
    </body>
    
    Макет, состоящий из 3 блок с абсолютным позиционированием
  4. Дополнительно к блокам можно применять свойство z-index, которое предназначено для позиционирования элементов по оси Z. Чем больше значение свойства z-index, тем ближе элемент расположен к нам, и наоборот, чем меньше значение, тем дальше расположен элемент от нас.
    <body>
    <body>
    <div style="width: 300px; height:300px; position:relative; border: 1px solid black; background:green;">
      <div style="width: 100px; height:100px; position: absolute; z-index: 1; left: 50px; top: 50px; border: 1px solid black; background: red;"></div>
      <div style="width: 100px; height: 100px; position: absolute; z-index: 2; left: 100px; top: 100px; border: 1px solid black; background: blue;"></div>
      <div style="width: 100px; height: 100px; position: absolute; z-index: 3; left: 150px; top: 150px; border: 1px solid black; background: yellow;"></div>
    </div>
    </body>
    
    Расположение блоков с абсолютным позиционированием, к которым применено свойство z-index


   HTML и CSS 0    3687 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.