Книга: JavaScript. Подробное руководство, 6-е издание

16.2.1. Позиционирование элементов с помощью CSS

16.2.1. Позиционирование элементов с помощью CSS

CSS-свойство position задает тип позиционирования, применяемый к элементу. Это свойство может иметь четыре возможных значения:

static

Это значение, применяемое по умолчанию. Оно указывает, что элемент позиционируется статически в соответствии с нормальным порядком вывода содержимого документа (для большинства западных языков - слева направо и сверху вниз). Статически позиционированные элементы не могут позиционироваться с помощью свойств top, left и других. Для позиционирования элемента документа с применением приемов CSS сначала нужно установить его свойство position равным одному из трех других значений.

absolute

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

fixed

Это значение позволяет зафиксировать положение элемента относительно окна броузера. Элементы с фиксированным позиционированием не прокручиваются с остальной частью документа. Как и абсолютно позиционированные, фиксировано позиционированные элементы не зависят от всех остальных элементов и не являются частью потока вывода документа. Фиксированное позиционирование поддерживается большинством современных броузеров, исключая ІЕ6.

relative

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

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

<div>

Если для элемента задана абсолютная позиция, значения его свойств top и left интерпретируются как расстояния до ближайшего родительского элемента, свойство position которого имеет любое значение, кроме static. Если абсолютно позиционируемый элемент не имеет позиционируемого предка, его свойства top и left будут определять координаты относительно начала документа - левого верхнего его угла. Если вам потребуется позиционировать элемент относительно контейнера, который является частью обычного потока вывода документа, определите в контейнере свойство position:relative и укажите значение 0рх в свойствах top и left контейнера. В этом случае контейнер будет позиционироваться динамически и останется при этом на обычном месте в потоке вывода документа. Любые абсолютно позиционируемые вложенные элементы будут позиционироваться относительно контейнера.

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

position: absolute; right: 0рх; bottom: 0рх;

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

position: fixed; right: 10рх; top: 10рх;

Помимо позиций элементов CSS позволяет указывать их размеры. Чаще всего это делается путем задания значений свойств стиля width и height. Например, следующая разметка HTML создаст абсолютно позиционированный элемент без содержимого. Его свойствам width, height и background-color присвоены такие значения, что он будет отображаться в виде маленького синего квадрата:

<div>
</div>

Другой способ задать ширину элемента состоит в одновременном задании значений обоих свойств, left и right. Аналогично можно задать высоту элемента, одновременно указав оба свойства, top и bottom. Однако если задать значения для свойств left, right и width, то свойство width переопределит свойство right, а если ограничивается высота элемента, то более высоким приоритетом будет пользоваться свойство height.

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

Стандарт CSS требует, чтобы в значениях свойств, определяющих позицию и размер, указывались единицы измерения. В предыдущих примерах значения свойств позиционирования и размера задавались с суффиксом «рх», означающим «pixels» (пикселы). Можно также использовать другие единицы измерения: дюймы («in»), сантиметры («сm»), пункты («pt») и «еm» (размер высоты строки текущего шрифта).

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

<div>
</div>

Мы видели, что свойства left, top, right и bottom позволяют указывать координаты X и Y элемента в двухмерной плоскости элемента-контейнера. Свойство z-index определяет что-то вроде третьего измерения: оно позволяет определить порядок наложения элементов и указать, какой из двух или более перекрывающихся элементов должен располагаться поверх других. Атрибут z-index представляет собой целое число. По умолчанию его значение равно нулю, но можно задавать положительные и отрицательные значения. Когда два или более элементов перекрываются, они отображаются в порядке от меньших значений z-index к большим, т.е. элемент с большим значением z-index отображается поверх всех остальных. Если перекрывающиеся элементы имеют одинаковые значения z-index, они отображаются в порядке следования в документе, поэтому наверху оказывается последний из перекрывающихся элементов.

Обратите внимание, что порядок наложения определяется свойством z-index только для смежных элементов (т. е. для дочерних элементов одного контейнера). Если перекрываются два несмежных элемента, то на основе индивидуальных значений свойств z-index нельзя указать, какой из них должен находиться сверху. Вместо этого надо задать атрибут z-index для двух смежных контейнеров перекрывающихся элементов.

Способ размещения непозиционируемых элементов (элементов со значением по умолчанию режима позиционирования position:static) исключает возможность перекрытия, поэтому к ним свойство z-index не применяется. Тем не менее они получают значение z-index, по умолчанию равное нулю, т.е. позиционируемые элементы с положительным значением z-index отображаются поверх обычного потока вывода документа, а позиционируемые элементы с отрицательным значением z-index оказываются ниже обычного потока вывода документа.

Спецификация CSS3 включает свойство text-shadow, позволяющее добиться эффекта отбрасывания тени текстовыми элементами. Данное свойство поддерживается многими текущими броузерами, однако добиться эффекта тени можно и с помощью CSS-свойств позиционирования, для чего достаточно продублировать, сместив, выводимый текст:

<!-- Свойство text-shadow производит тень автоматически -->
<span>С тенью</span>
<! --
Ниже показано, как добиться похожего эффекта с помощью механизма позиционирования.
-->
<span>
  С тенью <!-- Это основной текст, отбрасывающий тень. -->
  <span>
    С тенью <!-- Это тень -->
  </span>
</span>

Текст, отбрасывающий тень, заключается в относительно позиционируемый элемент <span>. Для него не определяются свойства, задающие позицию, поэтому текст отображается в обычной позиции в потоке. Тень заключается в абсолютно позиционируемый элемент <span>, помещенный в относительно позиционируемый элемент <span> (и поэтому позиционируется относительно него). Свойство z-index обеспечивает отображение тени под текстом.

Оглавление книги