Это значение позволяет зафиксировать положение элемента относительно окна броузера. Элементы с фиксированным позиционированием не прокручиваются с остальной частью документа. Как и абсолютно позиционированные, фиксировано позиционированные элементы не зависят от всех остальных элементов и не являются частью потока вывода документа. Фиксированное позиционирование поддерживается большинством современных броузеров, исключая ІЕ6.
relative
Если свойство
position
имеет значение
relative
, элемент располагается в соответствии с нормальным потоком вывода, а затем его положение смещается относительно его обычного положения в потоке. Пространство, выделенное для элемента в нормальном потоке вывода документа, остается выделенным для него, и элементы, расположенные
со всех сторон от него, не смыкаются для заполнения этого пространства и не «выталкиваются» с новой позиции элемента.
Присвоив свойству
position
элемента значение, отличное от
static
, можно задать положение элемента с помощью произвольной комбинации свойств
left, top, right
и
bottom
. Чаще всего для позиционирования используются свойства left и
top
, задающие расстояние от левого края элемента-контейнера (обычно самого документа) до левого края позиционируемого элемента и расстояние от верхнего края контейнера до верхнего края элемента. Так, чтобы поместить элемент на расстоянии 100 пикселов от левого края и 100 пикселов от верхнего края документа, можно задать CSS-стили в атрибуте
Если для элемента задана абсолютная позиция, значения его свойств
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
присвоены такие значения, что он будет отображаться в виде маленького синего квадрата:
способ задать ширину элемента состоит в одновременном задании значений обоих свойств,
left
и
right
. Аналогично можно задать высоту элемента, одновременно указав оба свойства,
top
и
bottom
. Однако если задать значения для свойств
left
,
right
и
width
, то свойство
width
переопределит свойство
right
, а если ограничивается высота элемента, то более высоким приоритетом будет пользоваться свойство
height
.
Имейте в виду, что задавать размер каждого динамического элемента не обязательно. Некоторые элементы, такие как изображения, имеют собственный размер. Кроме того, для динамических элементов, включающих текст или другое потоковое содержимое, часто бывает достаточно указать желаемую ширину элемента и разрешить автоматическое определение высоты в зависимости от размещения содержимого элемента.
Стандарт CSS требует, чтобы в значениях свойств, определяющих позицию и размер, указывались единицы измерения. В предыдущих примерах значения свойств позиционирования и размера задавались с суффиксом «рх», означающим «pixels» (пикселы). Можно также использовать другие единицы измерения: дюймы («in»), сантиметры («сm»), пункты («pt») и «еm» (размер высоты строки текущего шрифта).
Помимо единиц измерения, представленных выше, CSS позволяет задавать положение и размер элемента в процентах от размера элемента-контейнера. Например, следующая разметка HTML создаст пустой элемент с черной рамкой, имеющий ширину и высоту в половину элемента-контейнера (или окна броузера) и расположенный в этом элементе по центру:
позволяют указывать координаты 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 оказываются ниже обычного потока вывода документа.