Режим позиционирования элемента Web-страницы, т.е. размещения его на экране, задается с
помощью свойства CSS position, которое имеет
следующие значения:
- static - положение элемента на экране задается браузером в соответствии с
тем местом, которое элемент занимает в HTML-документе (значение задано по
умолчанию, не использует координаты элемента и поэтому не может быть выбрано
для организации движения элемента);
- relative - положение элемента на экране задается с помощью координат
относительно того места на экране, куда браузер поместил бы элемент в режиме
static;
- absolute - положение элемента на экране задается с помощью его координат
относительно родителя.
При использовании режима позиционирования absolute,
положение элемента на экране может быть задано с помощью таких свойств CSS:
- left - задает или возвращает горизонтальную позицию левой границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
левой границы окна браузера);
- top - задает или возвращает вертикальную позицию верхней границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
верхней границы окна браузера);
- right - задает или возвращает горизонтальную позицию правой границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
правой границы окна браузера);
- bottom - задает или возвращает вертикальную позицию нижней границы элемента
относительно родителя (если родителем является тэг <BODY>, то относительно
нижней границы окна браузера).
Если для одного элемента заданы оба свойства: left и right, то свойство right игнорируется. При совместном задании свойств top и bottom предпочтение
отдается свойству top.
Значения свойств left, top, right и bottom могут быть заданы:
- в абсолютных единицах:
- pt - в пунктах (1/72 дюйма);
- px - в пикселях;
- mm - в мм;
- cm - в см;
- in - в дюймах.
- в процентах от ширины родителя;
- предопределенным значением auto, которое задается по умолчанию и указывает
на то, что элемент позиционируется браузером.
Если единицы измерения не указаны, то подразумевается, что они заданы в
пикселях.
Ниже приведен пример рисунка, расположенного в 200
пикседях от левой границы экрана и в 100 пикселях от верхней границы экрана:
<IMG NAME="imgs" SRC="fish.gif" STYLE="position:absolute;
left:200;top:100">
Если попытаться сдвинуть этот рисунок на экране на 50 пикселей вправо с
помощью выражения
imgs.style.left+=50,
то это приведет к возникновению ошибки "Недопустимый аргумент" из-за того,
что свойство left возвращает значение не в виде числа
200, а в виде строки "200px".
Поэтому надо или воспользоваться функцией parseInt(), которая возвращает только число:
imgs.style.left=parseInt(imgs.style.left)+50,
или вместо свойств left, top, right и bottom применять свойства:
- pixelLeft - задает или возвращает численное значение горизонтальной позиции левой
границы элемента в пикселях;
- pixelTop - задает или возвращает численное значение вертикальной позиции верхней
границы элемента в пикселях;
- pixelRight - задает или возвращает численное значение горизонтальной позиции
правой границы элемента в пикселях;
- pixelBottom - задает или возвращает численное значение вертикальной позиции
нижней границы элемента в пикселях.
В нашем примере вместо свойства left необходимо
использовать свойство pixelLeft:
imgs.style.pixelLeft+=50;
Если же координаты элемента заданы в других единицах измерения, необходимо
использовать свойства:
- posLeft - задает или возвращает численное значение горизонтальной позиции левой
границы элемента в единицах измерения, заданных свойством left;
- posTop - задает или возвращает численное значение вертикальной позиции верхней
границы элемента в единицах измерения, заданных свойством top;
- posRight - задает или возвращает численное значение горизонтальной позиции
правой границы элемента в единицах измерения, заданных свойством right;
- posBottom - задает или возвращает численное значение вертикальной позиции
нижней границы элемента в единицах измерения, заданных свойством bottom.
