Position relative - що це? Докладний опис

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

Відео: 012 The Absolute and Relative Refractory Periods

Однак перш ніж стати досвідченим верстальником, кожен новачок проводить багато часу, вивчаючи різні інструкції і специфікації як за мовою 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 Vectors

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

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

Відео: Describing the Position of an Object - Early Primary Educational Standard

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

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

Робота з Position в javascript

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

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

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

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

Відео: Motion in a Straight Line: Crash Course Physics # 1

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

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

Крім верстки звичайних сторінок 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- т. Е. На своє оригінальне місце.