Абсолютна і відносне позиціонування елементів на сторінці - хочу веб-сайт

Абсолютна і відносне позиціонування елементів на сторінці

Початківцю веб-майстру дуже важливо не тільки вивчити мову HTML. навчиться правильно застосовувати теги для компонування веб сторінки. але і зрозуміти ідеологію. згідно з якою ця веб сторінка формується.

Вміст на веб сторінці зазвичай з'являється в тому порядку, в якому воно кодується в HTML. Крім того, що елементи можуть зміщуватися вліво або вправо на сторінці з оточуючий їх текстом, можна так само управляти позиціонуванням елементу з точністю до пікселя за допомогою властивостей стилю.

Для точного позиціонування на сторінці елементу необхідно привласнити властивість position зі значенням absolute або relative. Після цього елемент можна розмістити в будь-якому місці з точністю до пікселя за допомогою відповідних властивостей left. top. і z-index.

Відносне позиціонування об'єктів

Щоб змінити позицію тега йому можна присвоїти стиль position: relative. За допомогою position: relative позицію тега можна змінити щодо його вихідного положення. Властивість left задає відстань в пікселях, на яку зміщується елемент зі свого звичайного горизонтального положення; властивість top задає відстань в пікселях, на яку зміщується елемент зі свого звичайного вертикального положення.

Задається значення в пікселях може бути позитивним або негативним. Позитивне значення для властивості left переміщує елемент вправо, а негативне значення вліво. Позитивне значення для властивості top переміщує елемент на сторінці вниз, а негативне значення вгору.

У наведеному нижче прикладі кожне слово словосполучення укладено в окремий контейнер

У підсумку слова зміщуються щодо свого нормального вертикального положення. Я не поставив позицію слів по горизонталі, так як за замовчуванням теги розміщуються в рядку поруч один з одним. Змінюється положення слів тільки по вертикалі щодо свого звичайного вертикального вирівнювання.

Дуже важливо розуміти, що при використанні відносного позиціонування (relative) простір на веб сторінці все ще зарезервовано для елемента в його вихідної позиції. в незалежності від того, що він був переміщений з цього місця. І початковий розмір і положення тега зберігається в потоці елементів сторінки, займане тепер вільним простором, де тег мав би нормально з'явитися. Але не тільки цей, будь-який наступний далі тег зберігає своє положення щодо вихідного положення переміщеного тега.

Поки елементи сторінки переміщуються вертикально зі свого вихідного положення на невелику кількість пікселів, питання з вільним простором зазвичай не створюють проблем. Однак зі збільшенням вертикального відстані в потоці елементів сторінки з'являється вільне місце, представляючи собою залишене простір, яке раніше займав переміщений елемент. Необхідно завжди пам'ятати про це і перевіряти позиціонування об'єктів, щоб вони були розміщені саме там де планував веб-майстер.

абсолютне позиціонування

У той час як position: relative розміщує елемент щодо оточуючих елементів, position: absolute поміщає елемент щодо його контейнерного елемента. За замовчуванням контейнерним елементом є сама веб сторінка, тег . Тому елементи позиціонуються абсолютно щодо верхнього лівого кута веб сторінки і виключаються зі звичайного потоку елементів.

Розміщене під цим параграфом словосполучення "Хочу веб-сайт"
визначено тегом div. Цей тег з'являється в коді HTML відразу перед цим параграфом.
Він позиціонується абсолютно; тому він виключений з нормального потоку елементів сторінки.
У зв'язку з цим винятком тега з потоку елементів сторінки параграф зміщується вгору,
щоб зайняти місце, що звільнилося простір сторінки, тому накладається на словосполучення.
Таким чином, словосполучення "Хочу веб-сайт" займає на сторінці абсолютне положення,
незалежно від того, що ще його оточує. Для нього задано також значення z-index. рівне -1,
поміщають його на сторінці під шаром тексту, щоб слова не перекривало текст.

Шар тексту сторінки завжди має значення z-index. рівне 0 (нулю). Тому тегу