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)

Примеры

Свойство relative: поднимем слово относительно базовой линии строки на 5 пикселей
<SPAN id=oSpan STYLE="position: relative; top:-5px">поднимем</SPAN>

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

<SCRIPT>
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="выравним";
}
</SCRIPT>
<INPUT onclick="fnRelative()" TYPE=button VALUE="Поднять">
<INPUT onclick="fnDown()" TYPE=button VALUE="Опустить">
<INPUT onclick="fnStatic()" TYPE=button VALUE="Выровнять">

Демонстация Z-index в скрипте

САША +

ТАНЯ =

Любовь!

<INPUT onclick="start_z()" TYPE=button VALUE="Запустить пример">

<table border width=500><tr><td>
<DIV Id=CloseDiv STYLE="position:relative; top: 4; left:30; height: 130; 
width:190;  background: red; font-size:40; color: white;z-index: 4">
САША +
</DIV>

<DIV Id=FarDiv STYLE="position:relative; top: -100; left:240; height: 90; 
width:150;  background: blue; font-size:30; color:white; z-index: 2">
ТАНЯ =
</DIV>

<DIV ID=MovingMessage  STYLE="position:relative; top: -155; left:0; 
height: 30; width:80;  background: yellow; font-size:15; z-index: 3">
Любовь!
</DIV>
</td></tr></table>

<SCRIPT LANGUAGE=VBSCRIPT>
Sub start_z
  MovingMessage.style.posLeft = 0
  setTimeout "MoveLeft",5,"VBScript"
End Sub
Sub MoveLeft 
  MovingMessage.style.posLeft = MovingMessage.style.posLeft + 1	
  If MovingMessage.style.posLeft < 400 Then setTimeout"MoveLeft",10,"VBScript"
End Sub
</SCRIPT>

Вернуться к содержанию