Режим позиціонування елемента Web-сторінки, тобто розміщення його на екрані, задається
допомогою властивості CSS position, яке має
наступні значення:
- static - положення елементи на екрані задається браузером відповідно до
тим місцем, яке елемент займає в HTML-документі (задано значення на
замовчуванням, не використовує координати елемента і тому не може бути обрано
для організації руху елемента);
- relative - положення елементи на екрані задається за допомогою координат
щодо того місця на екрані, куди браузер помістив б елемент у режимі
static;
- absolute - положення елементи на екрані задається за допомогою його координат
щодо батька.
При використанні режиму позиціонування absolute,
положення елементи на екрані може бути задано за допомогою таких властивостей CSS:
- left - задає або повертає горизонтальну позицію лівого краю елемента
щодо батьків (якщо батьком є тег <BODY>, то щодо
лівої межі вікна браузера);
- - задає або повертає вертикальну позицію верхньої межі елемента
щодо батьків (якщо батьком є тег <BODY>, то щодо
верхньої межі вікна браузера);
- - задає або повертає горизонтальну позицію правого краю елемента
щодо батьків (якщо батьком є тег <BODY>, то щодо
правої межі вікна браузера);
- bottom - задає або повертає вертикальну позицію нижньої межі елемента
щодо батьків (якщо батьком є тег <BODY>, то щодо
нижньої межі вікна браузера).
Якщо для одного елемента задані обидва властивості: left, right, то властивість right ігнорується. При спільному завдання властивостей top і bottom перевагу
віддається властивості top.
Значення властивостей left, top, і bottom right можуть бути задані:
- в абсолютних одиницях:
- 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,
або замість властивостей, top left, right і bottom застосовувати властивості:
- pixelLeft - задає або повертає чисельне значення горизонтальній позиції лівого
кордону елемента в пікселях;
- pixelTop - задає або повертає чисельне значення вертикальній позиції верхній
кордону елемента в пікселях;
- pixelRight - задає або повертає чисельне значення горизонтальній позиції
правої межі елемента в пікселях;
- pixelBottom - задає або повертає чисельне значення вертикальній позиції
нижньої межі елемента в пікселях.
У нашому прикладі замість властивості left необхідно
писпользовать властивість pixelLeft:
imgs.style.pixelLeft+=50;
Якщо ж координати елемента задані в інших одиницях виміру, необхідно
писпользовать властивості:
- posLeft - задає або повертає чисельне значення горизонтальній позиції лівого
кордону елемента в одиницях виміру, заданих властивістю left;
- posTop - задає або повертає чисельне значення вертикальній позиції верхній
кордону елемента в одиницях виміру, заданих властивістю top;
- posRight - задає або повертає чисельне значення горизонтальній позиції
правої межі елемента в одиницях виміру, заданих властивістю right;
- posBottom - задає або повертає чисельне значення вертикальній позиції
нижньої межі елемента в одиницях виміру, заданих властивістю bottom.
