З точки зору блокової моделі кожний елемент HTML являє собою прямокутник (блок), для якого можна задати такі параметри як поля, межі (рамки) і заповнення. Саме позиціонування визначає, де має розташовуватися даний блок, а також як він повинен впливати на елементи навколо себе. За допомогою позиціонування можна розмістити будь-який елемент точно в потрібному місці сторінки.
Приклад 15. (форматування блоків)
<html>
<head>
<title> текст </title>
</head>
<body>
<div style="border:1px solid #000000; background-color:GreenYellow; color:#000000; width:80px; height:80px">1</div> <!—блок1--> <div style="border:1px solid #000000; background-color:Yellow; color:#000000;
width:80px; height:80px">2</div> |
<!--блок2--> |
</body> |
|
</html> |
|
В основі позиціонування лежить можливість представити вікно браузера у вигляді системи координат.
Приклад 16: (розміщення тексту на відстані 100 пікселів від верхьої межі документа і на 200 пікселів від лівої межі документа)
<html>
<head>
<title> текст </title>
</head>
<body>
<div style="position:absolute; width:300; top:100px; left:200px;"> Текст, текст, текст.
</div>
</body> </html>
Приклад 17: (зміна позиціонування елементів web-сторінки)
<html>
<head>
<title> текст </title>
</head>
<body>
<div style="border:1px solid #000000; background-color:GreenYellow;
color:#000000; width:80px; height:80px; |
|
position:relative; left:100px ">1</div> |
<!—блок1--> |
<div style="border:1px solid #000000; background-color:Yellow; color:#000000;
width:80px; height:80px; |
|
position:relative; left:250px">2</div> |
<!--блок2--> |
</body> |
|
</html> |
|
Атрибут із значенням position:relative; – говорить браузеру, що вказаний елемент буде позиціонуватися відносно свого початкового положення; left – задає переміщення об’єкта зліва направо; top – зверху вниз; bottom – знизу вверх; right – справа наліво.
Розташуємо ці об’єкти в середині іншого блоку:
Приклад 18: (розташування об’єктів в середині блоку)
<html>
<head>
<title> текст </title>
</head>
<body>
<div style="width: 300px; height:250px; background-color:Gray; border:1px solid #000000; padding:0; margin:0 auto">
<div style="border:1px solid #000000; background-color:GreenYellow;
color:#000000; width:80px; height:80px">1</div> |
<!—блок 1--> |
<div style="border:1px solid #000000; background-color:Yellow; color:#000000;
width:80px; height:80px">2</div> |
<!—блок 2--> |
</div> |
|
</body> |
|
</html> |
|
Представлений нижче код дозволяє розмістити чотири об’єкти в різних кутах HTML-документа:
Приклад 19: (розміщення об’єктів в різних кутах html-документа)
<html>
<head>
<title> текст </title> </head>
<body>
<div style="border:1px solid #000000; background-color:GreenYellow;
color:#000000; width:80px; height:80px; position:absolute; |
|
top: 10px; left: 10px; ">1</div> |
<!—блок 1--> |
<div style="border:1px solid #000000; background-color:Yellow; |
|
color:#000000; width:80px; height:80px; position:absolute; |
|
bottom: 20px; left: 10px;">2</div> |
<!—блок 2--> |
<div style="border:1px solid #000000; background-color:Yellow;
color:#000000; width:80px; height:80px; position:absolute; |
|
top: 10px; right: 10px;">3</div> |
<!—блок 3--> |
<div style="border:1px solid #000000; background-color:GreenYellow; |
|
color:#000000; width:80px; height:80px; position:absolute; |
|
bottom: 10px; right: 10px; ">4</div> |
<!—блок 4--> |
</body> |
|
</html> |
|
Третій вимір веб-сторінки – атрибут z-index
Атрибут z-index дозволяє створювати шари і розташовувати одні елементи поверх інших.
Значенням по замовчуванню є auto або 0. Елемент з більшим значенням атрибута z-index перекриває елемент із меншим значенням даного атрибута.
Розглянемо приклад застосування даної властивості.
Приклад 20: (перекривання об’єктів)
<html>
<head>
<title> Текст </title>
</head>