Справочник тегов

CSS: Позиционирование


position Устанавливает или определяет позицию элемента. Может принимать значения:

static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам

absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body, если позиция родителя не определена свойствами top и left

relative - Позиция объекта определяется смещением от заданных свойств top и left

left/top Устанавливает или определяет позицию элемента относительно левого/верхнего края следующего объекта. Может принимать значения:

auto - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам

length - число с заданной единицей измерения (10mm;5px;3em)

percentage - число процентов от ширины/высоты родительского объекта (10%)



Свойство left или top можно использовать, если задан атрибут position, иначе параметры просто игнорируются

z-indexУстанавливает или получает порядок слоев для объектов. В скриптовых языках используйте конструкцию object.style.zIndex [ = vOrder ]. Может принимать два значения:

строку auto (по умолчанию) - Позиция объекта определяется текущей разметкой HTML по стандартным правилам

Order - число, задающее позицию объекта в слоях.
С помощью данного свойства можно накладывать один объект на другой (или прятать за другой объект). Можно использовать и отрицательные значения. Данное свойство применимо только к объектам, имееющим атрибут absolute или relative свойства position

Нельзя применять к объектам, имеющим окно (например, select)

Пример применения в скрипте

Примеры

Свойство absolut

Зададим элементу SPAN, содержащему слово ХАКЕР абсолютную позицию (0,0), что позволит вывести слово в левом верхнем углу браузера XAKEP

<SPAN STYLE="position: absolute; top:0px; left:0px; color:red">XAKEP</SPAN>

Свойство relative

А теперь поднимем слово относительно базовой линии строки на 5 пикселей

<SPAN id=oSpan STYLE="position: relative; top:-5px">поднимем</SPAN>

Причем, можно изменять позицию динамически, с помощью скриптов

function fnDown(){ oSpan.style.position="relative"; oSpan.style.top="5px"; oSpan.innerText="опустим"; } function fnRelative(){ oSpan.style.position="relative"; oSpan.style.top="-5px"; oSpan.innerText="поднимем"; } function fnStatic(){ oSpan.style.position="static"; oSpan.innerText="выравним"; }



Содержание раздела