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

Рекламний блок

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

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

Що таке CSS?

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

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

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

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

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

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

html position relative

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

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

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

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

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

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

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

    position relative это

    Робота з Position в javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    div position relative

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

    Рекламний блок



    Додати коментар
    Ваше Ім'я:   Ваш E-Mail:  


    Введіть слово "життя" без кавичок

    Відповідь:
    © http://kafedam.top 2019