Позиціювання об'єктів

Якщо не задане позиціювання то елементи відображаються браузером на сторінці у тій послідовності, в якій вони записані у HTML-документі.

Приклад 1. Розміщення блоків без позиціювання.

Файл index.html

<!DOCTYPE html><html><head> <title>Позиціювання блоків</title> <link rel="stylesheet" type="text/css" href="css\style.css"></head><body> <div>1</div> <div class="green">2</div> <div class="red">3</div> <div class="yellow">4</div></body></html>

Файл css\style.css

div{ margin: 5px; height: 100px; width: 100px; background-color: blue;}.green{ background-color: green;}.red{ background-color: red;}.yellow{background-color: yellow;}

Крапка перед іменем класу у css-файлі означає, що форматування задається не до тега, а до елементу у якого в файлі *.html задано class="ім'я класу".При цьому елементи <div class="ім'я класу"> наслідують форматування <div>, якщо для цієї властивості не вказано нове значення.

Приклад 2. Розташування об'єктів після застосування позиціювання

Файл index.html залишився без змін

<!DOCTYPE html><html><head> <title>Позиціювання блоків</title> <link rel="stylesheet" type="text/css" href="css\style.css"></head><body> <div>1</div> <div class="green">2</div> <div class="red">3</div> <div class="yellow">4</div></body></html>

Файл css\style.css змінився
div{position: fixed; top:10px; left: 10px; margin: 5px; height: 100px; width: 100px; background-color: blue;}.green{position: fixed; top:30px; left:30px; background-color: green;}.red{position: fixed; top:50px; left:50px;
background-color: red;}.yellow{position: fixed; top:70px; left:70px; background-color: yellow;}

position: fixed; - означає, що блок за будь-яких обставин займатиме у вікні браузера фіксовану позицію у вказаному положенні: top:50px; // відступ у пікселях від лівої межі (50 пікселів) left:50px; // відступ у пікселях від верхньої межі // bottom - відступ у пікселях від нижньої межі - не працюватиме, якщо задано відступ від верхньої // right - відступ у пікселях від правої межі- не працюватиме, якщо задано відступ від лівої

Існують і інші види позиціювання:

position: static; /* Позиціювання за замовчуванням */

position: absolute; /* Абсолютне позиціювання */

position: relative; /* Відносне позиціювання*/

position: inherit /* Успадкування дочірнім елементом батьківського позиціювання */

Завдання

№1. Запустіть у роботу приклад 2. Переконайтесь у одержанні правильного результату.

№2. Використовуючи position: fixed; виконайте позиціювання блоків, відповідно до зразка:

Google Sites

Report abuse