Position Relative - що це? Детальний опис

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

Однак перш ніж стати досвідченим верстальником, кожен новачок проводить багато часу, вивчаючи різні інструкції і специфікації як з мови HTML, так і за його союзнику - CSS. Саме про те, що таке CSS, для чого він потрібен і які «фінти вухами» дозволяє витворяти, а також про одного з його популярних властивостей - Position Relative - ми сьогодні і поговоримо.

Що таке CSS?

Абревіатура CSS може бути розшифрована і переведена на російську мову як «каскадні таблиці стилів». Звучить досить дивно - з одного боку, начебто і слова зрозумілі, а з іншого - загальний зміст вловлюється далеко не відразу. Почнемо з простого - з стилів. Дана технологія дозволяє надавати об`єктам на сторінці певні характеристики, що стосуються зовнішнього вигляду, які можна прописати лише одного разу, а використовувати нескінченну кількість разів.

Слово «таблиці» в офіційному перекладі виявилося практично випадково - насправді доречніше тут було б вживання слова «листи» або «списки», проте автори первісного перекладу вирішили, що на таблицю CSS схожий більше, ніж на список, і хто ми такі, щоб тепер їх судити.

Нарешті, слово «каскадні». Справа в тому, що кожен елемент може мати відразу кілька стилів, які можуть змішуватися або навіть перетинатися. У подібних випадках браузеру доводиться вдаватися до ряду правил, щоб правильно скомпонувати зовнішній вигляд блоку, у якого виявилося кілька стилів, при цьому один з них, наприклад, має властивість Position Relative, а інший - Position Absolute. Насправді подібні конфлікти допускати не можна, але у великих проектах подібна плутанина відбувається досить часто.

Отже, тепер, коли з назвою все зрозуміло, давайте розглянемо один простий приклад. Припустимо, на вашому сайті має бути велика кількість кнопок, оформлених певним чином. У них є такі властивості, як розмір, тінь, прозорість, колір. Звичайно, можна вказувати дані параметри, створюючи кожну кнопку, але набагато простіше буде використовувати CSS. На практиці вам необхідно описати якийсь клас, в якому будуть перераховані значення всіх вищезазначених властивостей, а потім, замість довгого перерахування, в тезі кожної кнопки потрібно буде лише вказати ім`я цього класу, після чого браузер сам пофарбує ці елементи в потрібні кольори і додасть їм належний «лиск».

Для чого потрібно властивість Position?

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

Які значення може приймати властивість Position?

Наше властивість може приймати кілька різних значень, їх всього п`ять. Ось короткий опис кожного з них:

• Position Inherit. Дана властивість дозволяє скопіювати дані про позицію у елемента, що є батьківським. Наприклад, якщо у вас є div із зазначеним Position Relative, то вписаний в нього IMG зі значенням inherit також отримає значення Relative.
• Position Static. Дане значення надається всім елементам автоматично, якщо не вказано яке-небудь інше. Елементи вписуються в позицію по мірі згадування в коді і недоступні для різних «витребеньок», що дозволяють міняти їх положення.
• Position Absolute. До цього значення властивості Position досить часто вдаються в тих випадках, коли необхідно створити «плаваючий» елемент. Володіючи даними значенням властивості, елемент залишається «невидимим» для решти складових сторінки. Тобто вони розташовуються так, немов нашого абсолютного елемента зовсім не існує. Сам же він буде завжди залишатися на місці, незалежно від того, як далеко була прокручена сторінка.
• Position Fixed. Багато в чому це значення схоже на попереднє, однак, в той час як абсолютний елемент прив`язується до батьків, фіксований використовує виключно координати верхнього лівого кута екрана браузера, не звертаючи уваги на інші елементи, які йому передували.
• Нарешті, Position Relative. Даний тип значення дозволяє розташовувати елемент щодо інших, що може бути корисно при створенні адаптивної розмітки, званої в народі «гумовою». Маючи дана властивість, елемент буде «розсовувати» інші, не втрачаючи можливості змінювати своє розташування на сторінці.

Особливості роботи з Position в різних браузерах

Не всі браузери однаково сумісні. У той час як більшість альтернативних програм для інтернет-серфінгу без будь-яких затримок сприймають значення Position абсолютно вірно, «хронічно особливий» Internet Explorer розглядає дане властивість залежно від своєї версії.

Наприклад, використовуючи вже «похований» браузер IE6, ви не зможете використовувати значення Fixed і Inherit - «ослик» їх просто проігнорує. Втім, незважаючи на те, що з сьомої версії ситуація почала виправлятися, і Fixed вже оброблявся, до Inherit всіма улюблений «браузер для скачування інших браузерів» дістався тільки в своїй восьмий іпостасі.

Решта ж оглядачі спокійно обробляють Position з перших версій, за винятком Opera, яка обзавелася підтримкою даної властивості у своїй 4 варіації, що вийшла в середині 90-х.

Робота з Position в javascript

Насправді розповідь про те, як слід працювати з властивістю Position в javascript, ми включили лише заради пристойності. Оскільки дане властивість не володіє будь-якими спецсимволами в назві, використовувати JS можна без будь-яких змін, наприклад, щоб задати для div Position Relative, слід включити такий рядок: div.style.position = `relative`.

Як бачите, все досить просто.

Чому Position Relative заслуговує особливої уваги?

У той час як більша частина значень властивості Position, м`яко висловлюючись, «плювала» на навколишні елементи, використовуючи значення "style position: relative", варто завжди пам`ятати про всю сторінці в цілому, бо неправильне його використання може сильно «перекоси» весь вміст екрану .

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

Коли слід використовувати відносне позиціонування?

Крім верстки звичайних сторінок HTML, Position Relative часто застосовується для створення різних цікавих ефектів. Наприклад, якщо ви хочете, щоб який-небудь елемент «приїжджав» на сторінку або ж, навпаки, плавно вирушав за її краї, то саме ця властивість може допомогти вам реалізувати цей «фінт».

Подібні «трюки» реалізуються через javascript, або, якщо ви прагнете до прогресивної верстці, через властивості CSS3, які дозволяють налаштовувати циклічне зміна значення тієї чи іншої змінної.

Крім того, в деяких випадках можливе створення «гібридних» значень Position Relative. CSS хоч і не дозволяє одночасно задати щось на зразок position: absolute relative, але, використовуючи деякі хитрощі, все-таки можна домогтися даного ефекту. Цей підхід може стати в нагоді в тих випадках, коли необхідно створити що-небудь на зразок складної підказки або контекстного меню. Розглядаючи приклади, ми обов`язково наведемо опис структури подібного «гібрида».

Приклади використання відносного позиціонування

Position Relative - це досить простий, але гнучкий інструмент, що дозволяє реалізовувати безліч цікавих ефектів. Щоб не витрачати час і місце на написання даремних шаблонних кодів, ми наведемо кілька усних алгоритмів, які зможуть прикрасити ваш сайт або його окремі сторінки.

Почнемо з «вибігали» рядка. Припустимо, у вас виникла необхідність в елементі, який буде «виїжджати» через лівого краю екрану і поступово рухатися до його правій стороні. Щоб реалізувати подібний «механізм», слід встановити position: relative- left: -100px, де -100 - приблизну кількість пікселів, що становлять ширину блоку. Подібний стиль дозволить вам заховати блок за межами екрану, встановивши його на «стартову позицію». Тепер можна використовувати скрипт, який буде кожні кілька мілісекунд нарощувати значення властивості left на одиницю доти, поки воно не стане рівним ширині вікна браузера мінус ширина елементу. В результаті ми отримуємо блок, який з`являється через лівого краю, прокочується через весь екран і «паркується» у його правого боку.

Інший приклад дозволяє створювати «відносно-абсолютні» елементи. Наприклад, ви можете вписати абсолютний всередину іншого, що має Position Relative. В результаті у нас є «відносний» блок, який не має розміру, в який вписано абсолютний, здатний тепер проявлятися в позиції, яка залежить від попередніх йому елементів.

Типові помилки при використанні Position Relative

Найбільш поширеною помилкою при використанні Position Relative є те, що багато верстальники забувають про здатність резервувати місце під блок, який може перебувати де завгодно. Наприклад, якщо у вас є досить великий, розміщений за межами екрану і має відносне позиціонування, на його місці зяятиме «діра». Втім, навіть це властивість, іноді створює певні незручності, можна використовувати на благо, наприклад, створюючи цікавий ефект «самозбирається» сайту, в якому всі його блоки поступово поміщаються на позицію top: 0- left: 0- т. Е. На своє оригінальне місце.