Тема 41(10): Позиціювання елементів веб-сторінки за допомогою стилів.
Позиціювання елемента - це розміщення його в певному місці сторінки.
Розміщувати елементи на сторінці можна не лише за допомогою Фреймів і таблиць каскадні стилі надають для цього додаткові цікаві можливості.
Зокрема, можна обирати один із трьох типів позиціювання елементів на сторінці: статичне, відносне та абсолютне позиціювання. Тег визначається атрибутом POSITION.
Значення властивості position:
position:static - задане за умовчанням і передбачає розміщення чергового об'єкта на вільному місці після попереднього;
position:fixed - елементи фіксовані і не змінюють положення при прокручуванні.
position:relative - визначає розташування об'єкта відносно того місця, яке б він зайняв, якби для нього було використане статичне позиціювання. Основна мета відносного позиціювання полягає не в тому, щоб перемістити елемент, а в тому, щоб встановити нову точку прив'язки для абсолютного позиціювання вкладених в нього елементів;
position:absolute - передбачає розміщення об'єкта шляхом задавання точного місця його розташування на сторінці. Елемент переміщується щодо кордонів елемента-контейнера, якщо у контейнері встановлена властивість position: relative;
Не можна одночасно застосовувати властивість float і будь-який тип позиціювання, крім static (тобто тип за замовчуванням).
Для відносного та абсолютного позиціювання використовують чотири властивості:
left (ліворуч) та right (праворуч), які задають відступи для розміщення об'єкта по горизонталі,
top (згори) та bottom (знизу) по вертикалі.
Необхідно задавати по одному значенню позиції по горизонталі та вертикалі. При цьому елементи можуть накладатися один на інший: нижче буде розташований об'єкт, описаний першим, а зверху той, який описали останнім.
Якщо потрібна зміна стандартного порядку накладання, застосовують шари. Шар об'єкта задають за допомогою властивості z-index, значенням якої можуть бути лише ціле число та auto (за умовчанням). Об'єкт із більшим значенням z-index розміститься поверх об'єкта з меншим значенням цієї властивості, перекриваючи його. Якщо ж об'єкти матимуть однакові її значення, то зверху розташується об'єкт, описаний нижче за текстом у HTML-документі.
Додаткові джерела:
Позиціювання - https://metanit.com/web/html5/8.9.php
Підручник CSS - https://www.w3schools.com/css/default.asp
БЛОКОВА МОДЕЛЬ. СЕЛЕКТОРИ КЛАСУ ТА ІДЕНТИФІКАТОРИ - Переглянути...
<HTML>
<HEAD>
<TITLE>Позиціювання</TITLE>
</HEAD>
<BODY>
<!перший контейнер>
<DIV STYLE="position:absolute; top:0; left:70; width:200; height:300">
<IMG SRC="fly.JPG">1111</DIV>
<!додаткові контейнери1>
<DIV STYLE="position:static">
<IMG SRC="fly.JPG">2222</DIV>
<DIV STYLE="position:relative; top:100; width:300; height:500">
<IMG SRC="fly.JPG">3333</DIV>
<!другий контейнер>
<DIV STYLE="position:absolute; top:10; left:15; width:600; height:100">
<H1 STYLE="color:green">Повій, вітре, до схід сонця, до схід сонця, край віконця.</Hl></DIV>
<!третій контейнер>
<DIV STYLE="position:absolute; top:60; left:400; width:50; height:100">
<H1 STYLE="color:blue">Чайка</H1></DIV>
</BODY>
</HTML>
Увага! Під час роботи з комп'ютером дотримуйтеся вимог БДЖ та санітарно-гігієнічних норм.
Посилання на On-line редактори:
vprava_5.2.docx
Зображення для завантаження