Html5 позиционирование

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

В этой статье мы внимательно рассмотрим некоторые малоизвестные вещи, касающиеся CSS-позиционирования.

Перед тем как начать, давайте кратко вспомним основы различных типов позиционирования.

Обзор доступных способов позиционирования

Свойство CSS position определяет тип позиционирования элемента.

Опции для позиционирования

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

Для этого надо свойству position задать одно из следующих значений:

  • relative
  • absolute
  • fixed
  • sticky

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

  • top
  • right
  • bottom
  • left
  • Начальное значение этих свойств — ключевое слово auto.

Надо учитывать, что если у элемента задано свойство position в значении absolute или fixed, то он является абсолютно позиционированным элементом. Также у позиционированных элементов начинает работать свойство z-index, определяющее порядок наложения.

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

  • абсолютно (absolute) позиционированные элементы полностью удаляются из потока, их место занимают ближайшие соседи.
  • относительно позиционированные (relative) и приклеенные (sticky) сохраняют свое место в потоке и их ближайшие соседи не занимают его. Однако отступы этих элементов не занимают пространство, а полностью игнорируются другими элементами и это может повлечь наложение элементов.
  • фиксированные (fixed) элементы (а фиксированное позиционирование есть разновидность абсолютного) всегда позиционируются относительно зоны видимости (игнорируя наличие позиционирования у предков), в то время как приклеенные элементы позиционируются относительно ближайшего предка со скроллингом (overflow:auto). И только при отсутствии таких предков они позиционируются относительно зоны видимости.

Подробнее это можно рассмотреть в демо:

See the Pen Overview of the available positioning types by George (@georgemarts) on CodePen.

Примечание: позиционирование “приклеенных элементов” до сих пор является экспериментальной технологией с ограниченной поддержкой в браузерах. Конечно, при желании вы можете использовать полифилл, чтобы добавить этот функционал в браузер, но с учетом малой распространенности это свойство в статье обсуждаться не будет.

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

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

Поэтому я решил начать с него при описании малоизвестные особенностей позиционирования.

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

Это демонстрируется следующим примером:

See the Pen Little-known thing #1 — Positioning elements with absolute positioning type by George (@georgemarts) on CodePen.

В этом демо зеленый блок изначально спозиционирован абсолютно с нулевыми отступами bottom:0 и left:0, его предку (красному блоку) позиционирование не задавалось вообще.

Однако, мы относительно позиционировали внешнюю обертку (элемент с классом jumbotron). Отметьте, как меняется позиционирование зеленого блока при изменении типа позиционирования его предков.

Абсолютно позиционированные элементы игнорируют свойство float

Если мы применим к плавающему элементу абсолютное или фиксированное позиционирование, свойство float получит значение none. С другой стороны, если мы зададим относительное позиционирование, элемент останется плавающим.

Взгляните на соответствующее демо:

See the Pen Little-known thing #2 — The absolutely positioned elements ignore the «float» property by George (@georgemarts) on CodePen.

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

Абсолютно позиционированные строчные элементы становятся блочными

Строчный элемент с абсолютным или фиксированным позиционированием приобретает свойства блочного элемента. Подробнее конвертация строчных элементов в блочные описана в таблице.

А вот пример:

See the Pen Little-known thing #3 — The inline elements which are absolutely positioned behave as block-level elements by George (@georgemarts) on CodePen.

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) — строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства width и height работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

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

У абсолютно позиционированных элементов нет схлопывания внешних отступов


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

Поведение абсолютно позиционированных элементов здесь схоже с плавающими элементами — их отступы не объединяются с соседними.

Вот пример:

See the Pen Little-known thing #4 — The margins don’t collapse on absolutely positioned elements by George (@georgemarts) on CodePen.

В этом демо элементу задан отступ в 20 пикселей. Его отступ коллапсирует с отступом родительского элемента, также равного 20 пикселям. Как видите, только при абсолютном позиционировании схлопывания не происходит.

Но как мы можем предотвратить схлопывание отступов? Нам нужно поместить между ними какой-либо разделитель.

Это может быть внутренний отступ (padding) или граница (border), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант — добавить клирфикс к родительскому элементу.

Позиционирование элементов с пикселями и процентами

Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов).

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

Смещение в процентах от ширины (для left
и right) или высоты ( top или bottom) родительского блока. Для приклеенных элементов, смещение рассчитывается в процентах от ширины (для left и right) или высоты ( top или bottom) потока. Допустимы отрицательные значения.

Как было сказано, при задании смещения в процентах, позиция элемента зависит от ширины и высоты его родителя.

Демо показывает эту разницу:

See the Pen Little-known thing #5 — The difference between positioning elements with pixels and percentages by George (@georgemarts) on CodePen.

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

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

расчет смещения в процентах

Примечание: как вы, наверное, знаете, свойство transform (вместе с различными функциями translate
) также позволяет изменить позицию элемента. Но в этом случае при использовании процентов расчет будет происходить на основе размер самого элемента, а не его родителя.

Заключение

Я надеюсь, что эта статья помогла вам лучше понять позиционирование в CSS и разъяснила основные сложности.

prgssr.ru

Блочный элемент в 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

itchief.ru

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

Один из способов позиционирования элементов на странице — через свойство float. Это свойство довольно универсально и может применяться разными путями.

По существу, свойство float берёт элемент, убирает его из обычного потока страницы и позиционирует слева или справа от родительского элемента. Все остальные элементы на странице будут обтекать такой элемент. Например, абзацы будут обтекать изображение, если для элемента <img> установлено свойство float.

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

Свойство float принимает несколько значений, два самых популярных — это left и right, они позволяют элементу располагаться слева или справа от своего родителя.

img {   float: left;  }

float на практике

Давайте создадим общий макет страницы с шапкой вверху, двумя колонками в центре и подвалом внизу. В идеале эту страницу следует разметить с помощью элементов <header>, <section>, <aside> и <footer>, как описано в уроке 2 «Знакомство с HTML». Внутри элемента <body> HTML может выглядеть так:

<header>...</header>  <section>...</section>  <aside>...</aside>  <footer>...</footer>

Здесь элементы <section> и <aside> являются блочными, поэтому они укладываются один поверх другого по умолчанию. Однако мы хотим, чтобы эти элементы располагались бок о бок. Установив float для <section> как left, а для <aside> как right, мы можем позиционировать их как две колонки, расположенных напротив друг друга. Наш CSS должен выглядеть так:

section {   float: left;  }  aside {   float: right;  }

Для справки, обтекаемые элементы располагаются по краю родительского элемента. Если нет родителя, обтекаемый элемент будет располагаться по краю страницы.

Когда мы устанавливаем элемент обтекаемым, то убираем его из обычного потока HTML-документа. Это приводит к тому, что ширина этого элемента по умолчанию становится шириной его содержимого. Иногда, например, когда мы создаём колонки для многократно используемого макета, такое поведение нежелательно. Это можно исправить путём добавления свойства width с фиксированным значением для каждой колонки. Кроме того, чтобы обтекаемые элементы не соприкасались друг с другом, в результате чего содержимое одного элемента располагается рядом с другим, мы можем использовать свойство margin, чтобы установить пространство между элементами.

Ниже мы расширяем предыдущий блок кода, добавив margin и width для каждой колонки, чтобы лучше формировать наш желаемый результат.

section {   float: left;   margin: 0 1.5%;   width: 63%;  }  aside {   float: right;   margin: 0 1.5%;   width: 30%;  }

Для двух колонок вы можете установить float, для одной колонки как left, а для другой как right, но для нескольких колонок нам придётся изменить наш подход. Скажем, к примеру, мы хотели бы получить ряд из трёх колонок между нашими элементами <header> и <footer>. Если мы выбросим наш элемент <aside> и воспользуемся тремя элементами <section>, наш HTML может выглядеть следующим образом:

<header>...</header>  <section>...</section>  <section>...</section>  <section>...</section>  <footer>...</footer>

Чтобы расположить эти три элемента <section> в строку из трёх колонок, мы должны задать float для всех элементов <section> как left. Мы также должны настроить ширину <section> с учётом дополнительных колонок и расположить их один рядом с другим.

section {   float: left;   margin: 0 1.5%;   width: 30%;  }

Здесь у нас есть три колонки, все с равной шириной и значением margin, а также с float, заданным как left.

Очистка и содержимое float

Свойство float было первоначально разработано, чтобы позволить содержимому обтекать вокруг изображений. Для изображения может быть задано float и всё содержимое вокруг этого изображения, естественно, обтекает вокруг него. Хотя это прекрасно работает для картинок, свойство float на самом деле не было предназначено для использования в макете и с целью позиционирования и, таким образом, оно идёт с несколькими ловушками.

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

Часто значения свойств margin и padding интерпретируются некорректно, заставляя их сливаться с обтекаемым элементом. Другие свойства также могут быть затронуты.

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

В нашем предыдущем примере с двумя колонками, после того как мы добавили float к элементам <section> и <aside>, но до того как установили свойство width к любому из них, содержимое внутри элемента <footer> располагалось между двумя обтекаемыми элементами выше него, заполняя всё доступное пространство. Следовательно, элемент <footer> находился бы в промежутке между элементами <section> и <aside>, занимая свободное место.

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

Очистка float

Очистка float происходит с помощью свойства clear, которое принимает несколько различных значений: наиболее часто используемые значения — left, right и both.

div {   clear: left;  }

Значение left очищает левые float, в то время как значение right очищает правые float. Значение both, однако, очистит левые и правые float и часто является наиболее идеальным вариантом.

Возвращаясь к нашему предыдущему примеру, если мы используем свойство clear со значением both для элемента <footer>, то можем очистить float. Важно, что clear применяется к элементу, указанному после обтекаемых элементов, а не раньше, чтобы вернуть страницу в её обычный поток.

footer {   clear: both;  }

Содержимое float

Вместо очистки float, ещё одним вариантом является установка содержимого float. Результат получится почти такой же, однако содержимое float действительно гарантирует, что все наши стили будут отображаться надлежащим образом.

Чтобы установить содержимое float, обтекаемые элементы должны находиться внутри родительского элемента, он будет выступать в качестве контейнера, оставляя поток документа полностью обычным за его пределами. В стилях для этого родительского элемента представлен класс group, как показано здесь:

.group::before,  .group::after {   content: "";   display: table;  }  .group::after {   clear: both;  }  .group {   clear: both;   *zoom: 1;  }

Здесь немного что происходит, но, по сути, всё что CSS делает — очищает все обтекаемые элементы внутри элемента с классом group и возвращает документ в обычный поток.

Более конкретно, псевдоэлементы ::before и ::after, как указано в уроке 4, динамически генерируют элементы выше и ниже элемента с классом group. Эти элементы не включают в себя какой-либо контент и отображаются как табличные элементы, подобно элементам блочным. Динамически генерируемый элемент после элемента с классом group очищает float внутри элемента с классом group, так же, как и clear ранее. И, наконец, элемент с классом group также очищает все float, которые могут появиться до него на случай, если существует float со значением left или right. Также сюда включена небольшая хитрость, которая заставляет старые браузеры играть красиво.

Здесь больше кода, чем единственная команда clear: both, но он может оказаться весьма полезным.

Рассматривая наш макет страницы с двумя колонками мы могли бы обернуть <section> и <aside> родительским элементом. Этот родительский элемент будет содержать в себе обтекаемые элементы. Код будет выглядеть следующим образом:

HTML

<header>...</header>  <div class="group">   <section>...</section>   <aside>...</aside>  </div>  <footer>...</footer>

CSS

.group::before,  .group::after {   content: "";   display: table;  }  .group::after {   clear: both;  }  .group {   clear: both;   *zoom: 1;  }  section {   float: left;   margin: 0 1.5%;   width: 63%;  }  aside {   float: right;   margin: 0 1.5%;   width: 30%;  }

Показанная здесь техника известна как «clearfix» и часто встречается на других сайтах с именем класса clearfix или cf. Мы решили использовать имя класса group, потому что он представляет группу элементов и лучше выражает содержимое.

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

На практике

Вернёмся к сайту Styles Conference и опробуем на нём добавление float к некоторому содержимому.

  1. Перво-наперво, перед применением float к любому элементу, давайте обеспечим содержимым эти обтекаемые элементы, добавив clearfix в наш CSS. В файле main.css, чуть ниже наших стилей сетки, добавим clearfix под именем класса group, как и раньше.
    /*   ========================================   Clearfix   ========================================  */  .group::before,  .group::after {   content: "";   display: table;  }  .group::after {   clear: both;  }  .group {   clear: both;   *zoom: 1;  }
  2. Теперь, когда мы можем использовать float, давайте зададим его для основного <h1> внутри элемента <header> как left и позволим остальному содержимому в заголовке обтекать его справа.

    Чтобы сделать это, добавим класс logo к элементу <h1>. Затем внутри нашего CSS добавим новый раздел стилей для основного заголовка. В этом разделе мы выберем элемент <h1> с классом logo и установим float как left.

    HTML

    <h1 class="logo">   <a href="index.html">Styles Conference</a>  </h1>

    CSS

    /*   ========================================   Основной заголовок   ========================================  */    .logo {   float: left;  }
  3. Пока мы здесь, добавим чуть больше деталей к нашему логотипу. Начнём с размещения элемента <br> или разрыва строки между словами «Styles» и «Conference», чтобы заставить текст нашего логотипа располагаться на двух строках.

    В CSS добавим границу по верху нашего логотипа и небольшой вертикальный padding, чтобы логотип свободно «дышал».

    HTML

    <h1 class="logo">   <a href="index.html">Styles <br> Conference</a>  </h1>

    CSS

    .logo {   border-top: 4px solid #648880;   padding: 40px 0 22px 0;   float: left;  }
  4. Поскольку мы сделали элемент <h1> обтекаемым, то хотим установить содержимое float. Ближайшим родителем для <h1> является элемент <header>, поэтому мы добавим к нему класс group. Это применит к нему стили clearfix, которые мы установили ранее.

    <header class="container group">   ...  </header>
  5. Элемент <header> принимает форму, так что давайте взглянем на элемент <footer>. Подобно тому, что мы сделали с <header>, мы установим float для наших авторских прав как left внутри <small> и пусть все остальные элементы обтекают его справа.

    В отличие от элемента <header>, однако, мы не собираемся применять класс непосредственно к обтекаемому элементу. На этот раз мы собираемся добавить класс к родителю обтекаемого элемента и использовать уникальный селектор CSS, чтобы выбрать элемент, а затем задать ему float.

    Начнём с добавления класса primary-footer к элементу <footer>. Поскольку мы знаем, что у нас будут обтекаемые элементы внутри <footer>, то должны добавить класс group, пока мы здесь.

    <footer class="primary-footer container group">   ...  </footer>
  6. Теперь, когда класс primary-footer установлен для элемента <footer>, мы можем использовать этот класс, чтобы целенаправленно выбрать элемент <small> с помощью CSS. Мы хотим задать ему float как left. Не забудьте создать новый раздел в нашем файле main.css для стиля основного подвала.

    /*   ========================================   Основной подвал   ========================================  */    .primary-footer small {   float: left;  }

    Для проверки — здесь мы выбираем элемент <small>, который должен находиться внутри элемента со значением primary-footer у атрибута class, такой как наш элемент <footer>, к примеру.

  7. Наконец, добавим небольшой padding сверху и снизу элемента <footer>, это поможет немного отделить его от остальной части страницы. Мы можем сделать это напрямую с помощью класса primary-footer.

    .primary-footer {   padding-bottom: 44px;   padding-top: 44px;  }

С учётом всех этих изменений в элементах <header> и <footer>, мы должны быть уверены, что внесли их на каждой странице, а не только на странице index.html.

С помощью нескольких float, элементы <header> и <footer> на главной странице Styles Conference работают совместно

Рис. 5.01. С помощью нескольких float, элементы <header> и <footer> на главной странице Styles Conference работают совместно

Позиционирование через inline-block

В дополнение к использованию float, ещё один способ, которым мы можем позиционировать контент — это применение свойства display в сочетании со значением inline-block. Метод с inline-block, как мы ещё обсудим, в первую очередь полезен для компоновки страниц или для размещения элементов в линию рядом друг с другом.

Напомним, что значение inline-block для свойства display отображает элементы в линию и позволяет им принимать все свойства блочной модели, включая height, width, padding, border и margin. Применение inline-block позволяет нам в полной мере воспользоваться блочной моделью, не беспокоясь об очистке каких-либо float.

inline-block на практике

Давайте взглянем на наш трёхколоночный пример с самого начала. Начнём мы, сохраняя наш HTML таким:

<header>...</header>  <section>...</section>  <section>...</section>  <section>...</section>  <footer>...</footer>

Теперь вместо float для наших трёх элементов <section> мы изменим у них значение display на inline-block, оставляя свойства margin и width те, что были ранее. В результате наш CSS будет выглядеть следующим образом:

section {   display: inline-block;   margin: 0 1.5%;   width: 30%;  }

К сожалению, одного этого кода недостаточно чтобы сделать трюк и последний элемент <section> выталкивается на новую строку. Помните, поскольку строчно-блочные элементы отображаются на одной линии друг за другом, они включают единое пространство между ними. Когда размер каждого отдельного пространства добавляется к ширине и значению горизонтального margin всех элементов в строке, общая ширина становится слишком большой, выталкивая последний элемент <section> на новую строку. Чтобы отобразить все элементы <section> на одной строке, следует удалить пустое пространство между каждым <section>.

Удаление пространства между строчно-блочными элементами

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

Первое решение — это поместить каждый новый открывающий тег элемента <section> в той же строке, что и закрывающий тег предыдущего элемента <section>. Вместо использования новой строки для каждого элемента мы в итоге начинаем элементы с той же строки. Наш HTML может выглядеть следующим образом:

<header>...</header>  <section>   ...   </section><section>   ...   </section><section>   ...  </section>  <footer>...</footer>

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

Ещё один метод для удаления пространства между строчно-блочными элементами состоит в открытии комментария HTML непосредственно после закрывающего тега элемента. Затем закройте комментарий непосредственно перед открывающим тегом следующего элемента. Это позволяет строчно-блочным элементам начинаться и завершаться на отдельных строках в HTML и «закомментирует» любое потенциальное пространство между элементами. В результате код будет выглядеть следующим образом:

<header>...</header>  <section>   ...  </section><!--  --><section>   ...  </section><!--  --><section>   ...  </section>  <footer>...</footer>

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

Создание многократно используемых макетов

При создании сайта всегда лучше написать модульные стили, которые могут быть повторно задействованы в других местах, а многократно используемые макеты находятся в верхней части списка повторно применяемого кода. Макеты могут быть созданы с помощью float или строчно-блочных элементов, но что работает лучше и почему?

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

Тем не менее, используйте то, что работает лучше для вас. Если с одним подходом вы знакомы лучше чем с другим, тогда задействуйте его.

В настоящее время в работе появились новые спецификации CSS — в частности, свойства flex- и grid-, которые помогут решить, как лучше всего сверстать страницы. Следите за этими методами, когда они начнут всплывать.

На практике

С твёрдым пониманием многократно используемых макетов, пришло время внедрить один на наш сайт Styles Conference.

  1. Для сайта Styles Conference мы создадим трёхколоночный макет используя строчно-блочные элементы. Мы сделаем это так, чтобы получить три колонки одинаковой ширины или две колонки с общей шириной, разделённой между ними как 2/3 для одной и 1/3 для другой.

    Для начала мы создадим классы, определяющие ширину этих колонок. Эти два класса мы назовём col-1-3 для одной трети и col-2-3 для двух третей. В разделе «Сетка» нашего файла main.css перейдём вперед и определим эти классы и соответствующую им ширину.

    .col-1-3 {   width: 33.33%;  }  .col-2-3 {   width: 66.66%;  }
  2. Мы хотим чтобы обе колонки отображались как строчно-блочные элементы. Нам также надо убедиться, что вертикальное выравнивание у них задано по верхней части каждой колонки.

    Давайте создадим два новых селектора, которые совместно будут использовать display и vertical-align.

    .col-1-3,  .col-2-3 {   display: inline-block;   vertical-align: top;  }

    Взгляните на CSS снова. Мы создали два селектора класса col-1-3 и col-2-3 разделённых запятой. Запятая в конце первого селектора означает, что за ней следует другой селектор. После второго селектора идёт открывающая фигурная скобка, которая сообщает что начинается описание стиля. С помощью запятой разделяющей селекторы мы можем привязать один стиль к нескольким селекторам одновременно.

  3. Мы хотим поместить некоторое пространство между колонок, которое поможет разбить содержимое. Это можно сделать, добавив горизонтальный padding к каждой колонке.

    Это хорошо работает, однако, когда две колонки располагаются рядом друг с другом, ширина пространства между ними будет вдвое больше, чем пространство от внешнего края. Чтобы уравновесить это, мы поместим все наши колонки в сетку и добавим к ней тот же padding.

    Давайте воспользуемся классом grid, чтобы определить нашу сетку, а затем зададим одинаковый горизонтальный padding для классов grid, col-1-3 и col-2-3. С запятыми, снова разделяющих наши селекторы, наш CSS выглядит следующим образом:

    .grid,  .col-1-3,  .col-2-3 {   padding-left: 15px;   padding-right: 15px;  }
  4. Когда мы устанавливаем горизонтальный padding, нам нужно быть осторожными. Помните, в прошлом уроке мы создали контейнер с классом container по центру всего нашего контента на странице с шириной 960 пикселей. В данный момент, если бы мы поставили элемент с классом grid внутрь элемента с классом container, то их горизонтальные padding сложились бы вместе и наши колонки не будут отображаться пропорционально ширине остальной части страницы.

    Мы не хотим чтобы это произошло, так что вместо этого мы должны поделиться некоторыми стилями из правил container с набором правил grid. В частности, мы должны поделиться свойством width (чтобы убедиться, что наша страница остаётся фиксированной на 960 пикселей в ширину) и свойством margin (чтобы выровнять по центру страницы элемент с классом grid).

    Мы осуществим это, разбивая набор старых правил container на следующее:

    .container,  .grid {   margin: 0 auto;   width: 960px;  }  .container {   padding-left: 30px;   padding-right: 30px;  }

    Теперь любой элемент с классом container или grid будет 960 пикселей в ширину и располагаться по центру страницы. Кроме того, мы сохранили существующий горизонтальный padding для любого элемента с классом container путём перемещения его в новый, отдельный набор правил.

  5. Хорошо, всю тяжёлую необходимую часть по настройке сетки завершили. Теперь пришло время для работы с нашим HTML и просмотра, как эти классы действуют.

    Мы начнём с тизеров на главной странице, в файле index.html, выровняв их по трём колонкам. В настоящее время тизеры обёрнуты элементом <section> с классом container. Мы хотим изменить класс container на grid так, чтобы внутри мы могли начать размещение колонок.

    <section class="grid">   ...  </section>
  6. Далее мы хотим добавить класс col-1-3 для каждого элемента <section> внутри <section> с классом grid.

    <section class="grid">     <section class="col-1-3">   ...   </section>      <section class="col-1-3">   ...   </section>      <section class="col-1-3">   ...   </section>     </section>
  7. И, наконец, поскольку каждая наша колонка является строчно-блочным элементом, нам следует убедиться что мы удалили пустое пространство между ними. Чтобы сделать это мы воспользуемся комментариями и добавим немного документации к каждому разделу, чтобы лучше организовать свой код.

    <section class="grid">      <!-- Спикеры -->      <section class="col-1-3">   ...   </section><!--      Расписание      --><section class="col-1-3">   ...   </section><!--      Место проведения      --><section class="col-1-3">   ...   </section>     </section>

    Для проверки — в строке 3 мы оставили комментарий, идентифицирующий раздел «Спикеры», который за ним следует. В конце строки 7 мы открываем комментарий сразу после закрывающего тега </section>. Внутри этого комментария, в строке 9 мы определяем следующий раздел «Расписание». Затем закрываем комментарий в начале строки 11, сразу перед открывающим тегом <section>. Аналогичная структура комментариев появляется в строках с 13 до 17 между двумя элементами <section>, прямо перед разделом «Место проведения». В целом, мы закомментировали любое потенциальное пустое пространство между колонок, одновременно используя те же комментарии для идентификации наших разделов.

Теперь у нас есть повторно используемая трёхколоночная сетка, которая поддерживает разные расстановки, с использованием ширины колонок как 1/3 и 2/3. Наша главная страница теперь содержит три колонки, разделяя все тизеры.

Главная страница Styles Conference теперь включает трёхколоночный макет

Рис. 5.02. Главная страница Styles Conference теперь включает трёхколоночный макет

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

Уникальное позиционирование элементов

Рано или поздно каждый пожелает точно позиционировать элемент, но float или строчно-блочные элементы не позволяют проделать такой трюк. Обтекаемые элементы, которые удаляют элемент из потока страницы, часто приводят к нежелательным результатам, поскольку окружающие элементы обтекают вокруг элемента с float. Строчно-блочные элементы, если только мы не создаём колонки, могут быть довольно неудобны, когда дело касается правильного положения. Для подобных ситуаций мы можем использовать свойство position в сочетании со свойствами смещения блока.

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

По умолчанию у каждого элемента значение position установлено как static, это означает, что элемент существует в обычном потоке документа и не принимает какие-либо свойства для его смещения. Значение static наиболее часто переписывается значением relative или absolute, которые мы рассмотрим дальше.

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

Значение relative для свойства position позволяет элементам отображаться в обычном потоке страницы, резервируя место для элемента как предполагалось и не позволяя другим элементам его обтекать. Однако, оно также позволяет модифицировать положение элемента с помощью свойств смещения. К примеру, рассмотрим следующие HTML и CSS:

HTML

<div>...</div>  <div class="offset">...</div>  <div>...</div>

CSS

div {   height: 100px;   width: 100px;  }  .offset {   left: 20px;   position: relative;   top: 20px;  }

Здесь для второго элемента <div> с классом offset задано значение position как relative, а также два свойства смещения — left и top. Это сохраняет исходное положение элемента и другим элементам не разрешено двигаться в эту область. Кроме того, свойства смещения перемещают элемент, выталкивая его на 20 пикселей от левого и на 20 пикселей от верхнего исходного местоположения.

Для относительно позиционированных элементов важно знать, что свойства смещения блока определяют, куда элемент будет перемещён, учитывая его исходное положение. Таким образом, свойство left со значением 20 пикселей фактически толкает элемент вправо на 20 пикселей. Свойство top со значением 20 пикселей затем будет толкать элемент вниз на 20 пикселей.

Когда мы позиционируем элемент с помощью свойств смещения, элемент перекрывает элемент под ним, а не сдвигает его вниз, как это делают свойства margin или padding.

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

Значение absolute для свойства position отличается от значения relative тем, что элемент с абсолютным позиционированием не появляется в обычном потоке документа, исходное пространство и положение абсолютно позиционируемого элемента не резервируется.

Кроме того, абсолютно позиционируемые элементы перемещаются относительно их ближайшего относительно позиционированного родительского элемента. Если относительно позиционированного родителя не существует, то абсолютно позиционированный элемент будет позиционироваться относительно элемента <body>. Это небольшая часть информации; давайте взглянем на то, как это работает внутри некоторого кода:

HTML

<section>   <div class="offset">...</div>  </section>

CSS

section {   position: relative;  }  div {   position: absolute;   right: 20px;   top: 20px;  }

В этом примере элемент <section> позиционируется относительно, но не включает каких-либо свойств смещения. Следовательно, его положение не меняется. Элемент <div> с классом offset включает значение position как absolute. Поскольку элемент <section> является ближайшим относительно позиционированным родительским элементом для <div>, то элемент <div> будет позиционироваться относительно элемента <section>.

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

В результате свойств right и top, элемент <div> появится в 20 пикселях справа и 20 пикселях сверху внутри <section>.

Поскольку элемент <div> позиционируются абсолютно, он не располагается в обычном потоке страницы и будет перекрывать любые окружающие его элементы. Кроме того, исходное положение <div> не сохраняется и другие элементы могут занять это место. Как правило, большая часть позиционирования может происходить без применения свойств position и свойств смещения, но в некоторых случаях они могут оказаться чрезвычайно полезны.

Резюме

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

Для проверки, в этом уроке мы рассмотрели следующее:

  • Что такое float и как его использовать, чтобы позиционировать содержимое.
  • Как очистить и установить содержимое обтекаемых элементов.
  • Как позиционировать содержимое с помощью строчно-блочных элементов.
  • Как удалить пустое пространство между строчно-блочными элементами.
  • Как уникально позиционировать контент через относительное и абсолютное позиционирование элементов.

Мы добавляем новые навыки с каждым уроком, так что давайте продолжим. Следующая тема — типографика!

webref.ru

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

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

Свойства left, top, right, bottom если определены, игнорируются.

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

При абсолютном позиционировании элемент не существует в потоке документа и его положение задаётся относительно краёв браузера. Задать этот тип можно через значение absolute свойства position. Координаты указываются относительно краёв окна браузера, называемого «видимой областью» (рис. 3.42).

Значения свойств left, right, top и bottom при абсолютном позиционировании

Рис. 3.42. Значения свойств left, right, top и bottom при абсолютном позиционировании

Для режима характерны следующие особенности.

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

Свойство position со значением absolute можно использовать для создания эффекта фреймов. Кроме абсолютного позиционирования для элементов необходимо назначить свойство overflow со значением auto. Тогда при превышении контентом высоты видимой области появится полоса прокрутки. Высота и ширина «фреймов» формируется автоматически путём одновременного использования свойств left, right для ширины и top, bottom для высоты (пример 3.31).

Пример 3.31. Создание аналога фреймов

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Абсолютное позиционирование</title>  <style type="text/css">  body { margin: 0; }  #sidebar, #content { position: absolute; }   #sidebar, #content { overflow: auto; padding: 10px; }  #header {  height: 80px; /* Высота слоя */  background: #FEDFC0; border-bottom: 2px solid #7B5427;  }  #header h1 { padding: 20px; margin: 0; }  #sidebar {   width: 150px; background: #ECF5E4; border-right: 1px solid #231F20;  top: 82px; /* Расстояние от верхнего края */   bottom: 0; /* Расстояние снизу */  }  #content {  top: 82px; /* Расстояние от верхнего края */  left: 170px; /* Расстояние от левого края */   bottom: 0; right: 0;  }  </style>  </head>  <body>  <div id="header"><h1>Плов народов мира</h1></div>  <div id="sidebar">  <p>Плов по-фергански</p><p>Плов узбекский</p>  <p>Плов сибирский</p><p>Плов итальянский</p>  <p>Плов эстонский</p><p>Плов по-американски</p>  <p>Плов по-индейски</p>  </div>  <div id="content">  <h2>Плов по-фергански</h2>  <p>Положить в казан нарезанное кусочками мясо и поджарить его до   образования корочки. Нашинкованный кольцами лук жарить вместе   с мясом до красноватого цвета, затем добавить морковь, нарезанную   соломкой. Положить половину соли, всё перемешать и жарить, пока   морковь не приобретёт золотисто-коричневый цвет. После этого налить   половину необходимого количества воды и дать закипеть.</p>   <p>Засыпать ровным слоем рис, усилить огонь и тотчас налить воду,   чтобы она накрыла рис на 1–1,5 см. Как только вода выпарится, плов   при помощи шумовки собрать к середине горкой, проколоть палочкой в   нескольких местах так, чтобы вода, находящаяся на поверхности,   прошла на дно. Затем накрыть плов и дать ему упреть 20–25 мин.</p>  <p>Тщательно перемешайте готовый плов, переложите в большое блюдо,   сверху разложите мясо.</p>  </div>  </body> </html>

Результат данного примера показан на рис. 3.43. Слой header выводится в потоке как обычно, а для слоёв sidebar и content установлено абсолютное позиционирование.

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

Рис. 3.43. Применение абсолютного позиционирования

В браузере IE6 для абсолютно позиционированных элементов нельзя одновременно задать свойства left, right и top, bottom.

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

Для начала создадим пустой слой с идентификатором floatTip и определим его стиль. Обязательными должны быть три стилевых свойства — position со значением absolute, display со значением none скрывает слой и width задаёт ширину слоя с подсказкой. Остальные свойства используются по желанию разработчика и предназначены для изменения оформления слоя (пример 3.32).

Пример 3.32. Стиль для всплывающей подсказки

#floatTip {  position: absolute; /* Абсолютное позиционирование */  width: 250px; /* Ширина блока */  display: none; /* Прячем от показа */  border: 1px solid #000; /* Параметры рамки */  padding: 5px; /* Поля вокруг текста */  font-family: sans-serif; /* Рубленый шрифт */  font-size: 9pt; /* Размер шрифта */  color: #333; /* Цвет текста */  background: #ECF5E4; /* Цвет фона */ }

Сам скрипт состоит из двух функций — moveTip() отслеживает движение мыши и в соответствии с координатами курсора меняет положение слоя, и toolTip() управляет видимостью слоя и выводит в нём желаемый текст (пример 3.33).

Пример 3.33. Скрипт для вывода слоя

document.onmousemove = moveTip; function moveTip(e) {  floatTipStyle = document.getElementById("floatTip").style;  w = 250; // Ширина слоя  // Для браузера IE  if (document.all) {   x = event.x + document.body.scrollLeft;   y = event.y + document.body.scrollTop;   // Для остальных браузеров  } else {   x = e.pageX; // Координата X курсора  y = e.pageY; // Координата Y курсора  }  // Показывать слой справа от курсора   if ((x + w + 10) < document.body.clientWidth) {   floatTipStyle.left = x + 'px';  // Показывать слой слева от курсора  } else {   floatTipStyle.left = x - w + 'px';  }  // Положение от верхнего края окна браузера  floatTipStyle.top = y + 20 + 'px'; } function toolTip(msg) {  floatTipStyle = document.getElementById("floatTip").style;  if (msg) {  // Выводим текст подсказки  document.getElementById("floatTip").innerHTML = msg;  floatTipStyle.display = "block"; // Показываем слой  } else {   floatTipStyle.display = "none"; // Прячем слой  }  }

Для удобства и универсальности скрипт следует вынести в отдельный файл и подключать его через атрибут src тега <script>. Окончательный код показан в примере 3.34.

Пример 3.34. Создание всплывающей подсказки

XHTML 1.0CSS 2.1CSS 3IE 7+IE 9+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Всплывающая подсказка</title>  <style type="text/css">  #floatTip {  position: absolute; width: 250px; display: none;   border: 1px solid #000; padding: 5px;  font-family: sans-serif; font-size: 9pt;  color: #333; background: #ECF5E4;   opacity: 0.85; /* Прозрачность слоя */  }  </style>  <script type="text/javascript" src="scripts/tooltip.js"></script>  </head>  <body>  <p><img src="images/odel2.jpg" alt="Фотография" width="300" height="450"   onmouseover="toolTip('Фотоаппарат: Canon EOS 350D<br />' +  'Объектив: Canon EF 24-105 f/4L IS USM<br />' +  'Вспышка: Canon Speedlite 580 EX<br />' +  'Выдержка: 1/125<br />Диафрагма: 5.6')" onmouseout="toolTip()" /></p>  <div id="floatTip"></div>  </body> </html>

Результат данного примера показан на рис. 3.44. Обратите внимание, что переносы текста при вызове функции toolTip() сделаны для удобства восприятия и имеют синтаксис JavaScript. В Safari скрипт иногда не работает при переносе текста, в этом случае текст следует записать в одну строку. К стилям добавлено свойство CSS3 opacity, которое добавляет для слоя небольшую прозрачность. В IE до версии 9.0 это свойство не поддерживается.

Всплывающая подсказка, выводимая с помощью JavaScript

Рис. 3.44. Всплывающая подсказка, выводимая с помощью JavaScript

Фиксированное положение

Фиксированное положение слоя задаётся значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Ещё одна разница от absolute заключается в том, что при выходе фиксированного слоя за пределы видимой области справа или снизу от неё, не возникает полос прокрутки.

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

Пример 3.35. Фиксированный подвал

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Фиксированный подвал</title>  <style type="text/css">  BODY { margin-bottom: 50px; }  #footer {  position: fixed; /* Фиксированное положение */  left: 0; bottom: 0; /* Левый нижний угол */  padding: 10px; /* Поля вокруг текста */  background: #39b54a; /* Цвет фона */  color: #fff; /* Цвет текста */  width: 100%; /* Ширина слоя */  }  </style>  </head>  <body>  <div id="content">  Все перечисленные на сайте методы ловли льва являются теоретическими   и базируются на вычислительных методах. Автор не гарантируют   вашей безопасности при их использовании и снимает с себя всякую   ответственность за результат.   Помните, лев это хищник и опасное животное!   </div>  <div id="footer">&copy; Влад Мержевич</div>  </body> </html>

Результат примера показан на рис. 3.45. Поскольку фиксированный подвал накладывается на текст и скрывает его, добавлен отступ снизу для селектора BODY. Браузер IE6 не поддерживает значение fixed, поэтому в нём данный пример будет работать некорректно.

Подвал внизу страницы

Рис. 3.45. Подвал внизу страницы

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

Если задать значение relative свойства position, то положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. Положительное значение left определяет сдвиг вправо от левой границы элемента, отрицательное — сдвиг влево. Положительное значение top задаёт сдвиг элемента вниз  (рис. 3.46), отрицательное — сдвиг вверх.

Значения свойств left и top при относительном позиционировании

Рис. 3.46. Значения свойств left и top при относительном позиционировании

Свойства bottom и right производят обратный эффект. При положительном значении right сдвигает элемент влево от его правого края, при отрицательном — сдвигает вправо (рис. 3.47). При положительном значении bottom элемент поднимается вверх, при отрицательном опускается вниз.

Значения свойств right и bottom при относительном позиционировании

Рис. 3.47. Значения свойств right и bottom при относительном позиционировании

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

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

В примере 3.36 показан сдвиг текста заголовка вниз для придания ему особого стиля написания.

Пример 3.36. Заголовок текста

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Заголовок</title>  <style type="text/css">  H1 {  font: bold 2em Arial, Tahome, sans-serif; /* Параметры шрифта */  color: #fff; background: #375D4C;  padding: 0 10px;  }  H1 SPAN {  position: relative; /* Относительное позиционирование */  top: 0.3em; /* Сдвигаем вниз */  }  </style>  </head>  <body>  <h1><span>Аз и буки шрифтовой науки</span></h1>  <p>Шрифт это средство выражения дизайна, а не какого-то   банального чтения.</p>  </body> </html>

Результат данного примера показан на рис. 3.48.

Html5 позиционирование

Рис. 3.48. Сдвиг текста относительно исходного положения

Вложенные слои

Обычно относительное позиционирование само по себе применяется не часто, поскольку есть ряд свойств выполняющих фактически ту же роль, к примеру, тот же margin. Но сочетание разных типов позиционирования для вложенных слоёв является одним из удобных и практичных приёмов вёрстки. Если для родительского элемента задать relative, а для дочернего absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя (рис. 3.49).

Значения свойств left, right, top и bottom во вложенных слоях

Рис. 3.49. Значения свойств left, right, top и bottom во вложенных слоях

Отсчёт координат ведётся от внутреннего края границы, значения полей не учитываются. В следующем примере текст располагается в правом нижнем углу слоя возле границы, игнорируя свойство padding.

<div style="position: relative; padding: 10px; border: 1px solid #000; background: #fc0; height: 500px;">  <div style="position: absolute; right: 0; bottom: 0">  Текст  </div </div>

Благодаря использованию четырёх свойств left, right, top, bottom для управления положением внутреннего слоя, размеры родительского слоя знать не обязательно. Это расширяет сферу применения позиционирования, поэтому position довольно активно применяется при вёрстке различных элементов. В качестве примера возьмём наложение на фотографию разной информации: количество комментариев к ней, ссылки «Добавить комментарий», «Информация об авторе» и «Добавить в избранное». В целом, результат должен быть примерно таким, как на рис. 3.50.

Фотография с наложенными элементами

Рис. 3.50. Фотография с наложенными элементами

Сам код приведён в примере 3.37. Для слоя photo установлено относительное позиционирование, а для внутренних слоёв img (вывод фотографии), comment (число комментариев) и tool (ссылки внизу фотографии) задано абсолютное позиционирование.

Пример 3.37. Позиционирование слоёв

XHTML 1.0CSS 2.1CSS 3IE 7+IE 9+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Позиционирование слоёв</title>  <style type="text/css">  .photo { width: 300px; height: 407px; position: relative; }  .img, .comment, .tool { position: absolute; }  .comment {   background: url(images/comment_num.png) no-repeat;   width: 51px; height: 31px; /* Размеры слоя */  text-align: center; /* Выравнивание по центру */  right: 10px; top: 15px; /* Положение от правого верхнего угла */  }  .tool {   background: #000; /* Для IE */  background-color: rgba(0,0,0,0.6); /* Чёрный полупрозрачный фон */   padding: 3px 0 0;   bottom: 0; /* Положение от нижнего края */  width: 100%; /* Ширина слоя */  }  .tool img { margin-left: 5px; }  </style>  </head>  <body>  <div class="photo">  <div class="img"><img src="images/dog.jpg" alt="Щенок" /></div>  <div class="comment" title="Количество комментариев">134</div>  <div class="tool">  <img src="images/comment_add.png" alt="Добавить комментарий" />  <img src="images/photo_author.png" alt="Информация об авторе" />  <img src="images/photo_star.png" alt="Добавить в избранное" />  </div>  </div>  </body> </html>

htmlbook.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector