Здрастуйте, шановні читачі блогу . Сьогодні ми поговоримо про принципи позиціонування Html-елементів за допомогою CSS правил Position (зі значеннями absolute, relative і fixed) і властивостей, які задають зміщення left, right, top і bottom. Бачите зірочку в лівому нижньому кутку? Дочитавши статтю до кінця, ви дізнаєтеся як вона туди потрапила.
У минулій статті ми поговорили про одне з основоположних правил CSS Float, яке допомагає розірвати нормальний потік йдуть один за одним в Html коді тегів. Воно дозволяє здійснювати блокову Div верстку, на якої нині в основному базується сайтостроение. Але не Float єдиним…
Position relative — відносне позиціонування
Є ще й Position, яке відповідає за позиціонування тегів засобами таблиць каскадних стилів і теж дозволяє розривати нормальний потік. У розумінні це правило буде трохи складніше раніше розглянутого float, але, думаю, ми впораємося.
У нього є чотири можливі значення (static | relative | absolute | fixed). Звідки ми це можемо дізнатися? Ну, звичайно ж, специфікації, яка викладена на офіційному сайті батька-засновника сучасної мережі інтернет Тіма Бернерса-Лі:
За замовчуванням використовується значення position: static. Тобто в нормальному потоці два CSS правила, здатних його розірвати, мають значення за замовчуванням static і float:none. Як тільки одне з цих значень зміниться — нормальний потік Html коду в цьому місці буде порушений, тому що тепер цей тег може зовсім по-іншому взаємодіяти зі своїми сусідами або взагалі навіть не взаємодіяти.
Давайте почнемо розгляд з відносного позиціонування, яке буде відповідати значенню position: relative. Після того, як ми пропишемо його для будь-якого тега, у нас з’явиться можливість ставити зсув (здійснювати позиціонування) для цього елемента з допомогою додаткових правил Left, right, top і bottom (вліво, вправо, вгору і вниз):
За замовчуванням для всіх чотирьох використовується значення Auto. Коли ми прописуємо для будь-якого тега правило position: relative, то значення відступів з усіх боків скидається в нуль і вам надається можливість самим поставити їх.
Потрібно розуміти як задаються відступи. Наприклад, left: 400px означає відступ від лівого боку праворуч на відповідну величину, а top: 100px — від верхньої сторони вниз. Якщо вкажіть негативні значення Left, right, top і bottom, то елемент буде рухатися в протилежну сторону (наприклад, top — нагору, а Left — вліво).
Давайте розглянемо використання relative для плаваючого елементу. Нехай у нас є два Div контейнера, які ми подкрасим для наочності різним кольором фону за допомогою background.
Перший контейнер спочатку ми змусимо плавати вліво за допомогою відповідного властивості, а тому що він буде порожній, то ми поставимо йому висоту і ширину, з width і height (і відступи за допомогою margin):
text text …
В результаті ми отримаємо приблизно таку картину маслом:
Перший контейнер, як і очікувалося, плаває вліво. При цьому сам по собі другий блок цього ніби й не помічає, бо він блочний — display: block), але зате це помічає рядковий елемент тексту, який обтікає наш плаваючий блок.
Тепер давайте додамо до CSS правилами для першого контейнера position: relative і задамо відступи зліва та зверху за допомогою Left і top:
text text …
В результаті ми побачимо, що наш плаваючий елемент зрушився у відповідності з певними відступами:
Зверніть увагу, що текст продовжує його обтікати так, як ніби він все ще стоїть на своєму місці. Тобто багато Html теги при своїй побудові вважають, що він знаходиться на своєму законному місці (без урахування заданих нами в правилах Left і top зрушень).
Але так робити не всі теги, інакше б ми не побачили жодних змін. Найближчий предок з прокруткою (в нашому випадку це буде тег Html, тобто фактично область перегляду) ці зміни помітить.
Принцип дії relative не складний, але не зовсім зрозуміло для чого це можна буде застосувати на практиці. Насправді це правило використовується в зв’язці з position absolute, і ось в такому вигляді воно знаходить дуже навіть велике застосування при верстці сайтів і макетів. Але про все по порядку.
Position absolute — абсолютне позиціонування в CSS
Давайте перейдемо до розгляду абсолютного позиціонування. Простіше всього буде почати розгляд цього CSS правила з показового прикладу. Припустимо, що у нас всередині Div контейнера знаходиться рядковий тег Span, для якого ми й поставимо абсолютне позиціонування.
Але спочатку подивимося на цю конструкції ще без додавання «position: absolute». При цьому для підкреслення строковості Span додамо йому висоту, яка все одно не застосується, а CSS код цього разу додамо для різноманітності не через атрибут style=»», а через тег style усередині конструкції Head:
#abs{
background:#FFC0C0;
margin-left: 100px;
}
#abs span{
background:#C0FFC0;
height:100px;
}
Перше друге і третє
Для Div ми ще й відступ зліва поставили в 100px. Ну, а тепер подивимося, що ж зміниться, якщо ми поставимо нашу рядковий тегу Span абсолютне позиціонування шляхом додавання CSS правила position absolute:
#abs span{
background:#C0FFC0;
height:100px;
position:absolute;
}>
Сталося дивне. Судячи з того, що до Span применилось властивість height:100px — він перестав бути рядковим тегом. Потім у нас, очевидно, зістикувалися один з одним фрагменти «перше» і «третє», як ніби елемента зі словом «другу» між ними вже не існує. Саме так і працює абсолютне позиціонування в CSS.
Але давайте розберемо все по пунктах при завданні елементу властивості «position: absolute»:
Також як і для плаваючих елементів (з прописаних Float), у разі застосування до тегу «position: absolute», ефект Margin-colloapse для таких тегів проявлятися не буде. Тобто йому ніхто не зможе передати свої вертикальні відступи і він нікому передати їх не зможе теж (ні з ким не ділиться вертикальними відступами).
Якщо ви згадайте попередню статтю з рубрики «Довідника CSS», то побачите, що всі ці три пункти спостерігалися і при створенні плаваючих елементів з допомогою Float.
Тому, якщо для будь-якого тега вже було задано Float, але потім для нього ж прописали «position: absolute», то перше браузером (саме він відповідає за розбір коду) скидається в None (значення за замовчуванням), бо немає сенсу реалізовувати дві однакові моделі.
Це все добре, але адже за допомогою «absolute» ми повинні здійснювати абсолютне позиціонування. Ну, власне, це так і є насправді. В купе з ним ми можемо використовувати всі ті ж чотири CSS правила: Left, right, top і bottom. Як вони будуть працювати при абсолютному позиціонування?
Вони як і раніше будуть задавати зміщення, але зміщення вже не щодо поточного стану елемента, а щодо меж його контейнера.
А саме поняття контейнера для абсолютно спозиційованих елементів буде відрізнятися від загальноприйнятого. З попередніх статей ви, напевно, пам’ятаєте, що контейнером для тега Html є область перегляду, а для всіх інших — область контенту батьків. У тега з прописаним position absolute це буде не так.
Контейнер при абсолютному позиціонування ми зможемо призначати самі (їм буде перший з предків, у якого значення position відрізняється від static, використовуваного за замовчуванням).
Припустимо, якщо ми поставили тільки абсолютне позиціонування, але не прописали ніяких значень для правил Left, right, top і bottom, то для них буде використано типове значення Auto і такий елемент залишиться стояти на своєму місці (як і у нас на останньому скріншоті). Тут має бути все зрозуміло.
В CSS використовується структура предків і нащадків, про яку я вже досить докладно писав у статті про селектори CSS псевдокласів. Наша задача, при визначенні контейнера для тега з абсолютним позиціонуванням, буде полягати в пошуку предка з position, що мають значення відмінне від static (тобто коли це було явно задано).
У нашому прикладі жодному з предків тега Span ми не прописували position, тож дійшовши до самого верху (тега Html) ми на цьому і зупинимося. Давайте задамо нульові відступи для розглянутого трохи вище прикладу і переконаємося в своїй правоті:
#abs span{
background:#C0FFC0;
height:100px;
position:absolute;
left:0;
top:0;
}>
У підсумку абсолютно зорієнтований тег притиснувся до нульової точки відліку області перегляду. Але ми вільні самі вибирати контейнер для елемента з прописаним position absolute. Як же це можна зробити?
Зв’язка position absolute і relative у Div верстці
Ну, а чому б для цього не використовувати CSS правило «position: relative». Пропишемо його в потрібному тегу предка (який стане в підсумку контейнером для абсолютно спозиционированного елемента), а значення Left, right, top або bottom прописувати не буде, тим самим, фактично, взагалі не внісши жодних змін у положення цього предка (він залишиться в нормальному потоці), але призначивши його контейнером і початком звіту для нашого абсолютного позиціонування.
Якщо ми пропишемо «relative» для тега Body, то наша картинка трохи зміниться:
Перше друге і третє
Бачите, з’явилися характерні відступи говорять про те, що тепер за точку відліку береться лівий верхній кут тега Body. Пам’ятайте, що в умолчательных значеннях для цього тега прописані відступи margin у 8 пікселів, які ми і спостерігаємо:
А тепер давайте на додаток до вже зробленого пропишемо «position: relative» і для контейнера Div, всередині якого і живе тег Span:
#abs{
background:#FFC0C0;
margin-left: 100px;
position: relative;
}
#abs span{
background:#C0FFC0;
height:100px;
position:absolute;
left:0;
top:0;
}
Перше друге і третє
Як бачимо, картина змінилася. Незважаючи на те, що relative прописано і для Тіла, і для Div, контейнером для абсолютно спозиционированного Span став саме Div, оскільки він є першим предком, у якого значення position відмінно від static.
Причому, якщо ми пропишемо для нашого Div ще й border з padding, а також margin, то побачимо, що в якості контейнера при абсолютному позиціонування буде використовуватися область контенту з наявними внутрішніми відступами:
#abs{
background:#FFC0C0;
margin-left: 100px;
position: relative;
border:12px dotted #ccf;
padding:20px;
}
Як видно з прикладу, точка відліку розташована в лівому верхньому кутку всередині рамки елемента (по внутрішній її межі). Звідси випливає правило, що для тегів з «position: relative» (які є контейнерами при абсолютному позиціонування) рамку краще взагалі не використовувати під уникнення ексцесів.
Відступи (зміщення) Left, right, top і bottom можна задавати не тільки в абсолютних одиницях (читайте про розміри в CSS), але і у відсотках, які будуть братися від ширини (left, right) і висоти (top і bottom) отриманого контейнера. Тобто «top:100%» буде відповідати 100% висоти контейнера, а «left:100%» — 100% від його ширини.
І саме описане вище взаємодію я мав на увазі, кажучи про в’язку position absolute і relative. У нас завдяки цьому з’являється можливість самим вибирати контейнер або ж, іншими словами, точку відліку при абсолютному позиціонування. Для чого ж на практиці використовують цю зв’язку?
Для реалізації завдання схожою на випадаюче меню, наприклад, або ж так звані Litebox для показу повнорозмірного фото можуть використати цей принцип.
Тобто, якщо вам потрібно на сторінці сформувати поява і приховування елемента, який при своїй появі не буде зачіпати всі інші теги (взаємодіяти з ними). У цьому випадку поява абсолютно спозиционированного блоку не спричинить за собою смикання і перебудову всієї веб-сторінки.
Для випадаючого меню роблять приблизно наступне. При наведенні курсору миші (задається в CSS з допомогою селектора псевдокласу hover) на кореневій пункт меню з’являється абсолютно спозиционилованный з допомогою «absolute» елемент (вкладені пункти меню, створені на основі звичайного списку). З’являється цей випадаючий список поряд з кореневим пунктом меню з тієї простої причини, що в ньому прописаний position: relative. Всі.
Position fixed — прив’язка до області перегляду
Останнім способом позиціонування є «position: fixed». Розглянуті раніше способи були розраховані на розміщення відносно будь-яких елементів Html коду. Але якщо ми починаємо прокручувати сторінку, то і її теги (навіть мають абсолютне чи відносне позиціонування) переміщаються вгору (або вниз).
А ось при використанні fixed такого вже відбуватися не буде. Спозиционирванный таким чином елемент завжди буде знаходитися в одному і тому ж положенні в області перегляду, незалежно від прокручування веб сторінки. Ви, напевно, такі варіанти вже зустрічали на сайтах. Наприклад, на подібний ефект побудована робота досить популярного плагіна WordPress під назвою Simple Counters.
Для тега з прописаним position:fixed контейнер ніхто не шукає, бо їм є сама область перегляду. Саме в цьому полягає відмінність від «absolute», а все інше у них збігається. Блоки з фіксованим розміщенням при прокручуванні сторінки ведуть себе так, як ніби це елементи інтерфейсу вікна вашого браузера (вони завжди під рукою).
Таким чином реалізуються, наприклад, панелі інструментів, випадають панелі з можливістю залишити відгук і т. п. речі. В якості прикладу на цій сторінці я задав position: fixed для маленької картинки в лівому нижньому куті екрану (області перегляду):
На сьогодні все, в наступній статті ми поговоримо вже про CSS правило z-index, яке застосовується тільки до вже спозиционированным елементів коду, тобто для яких прописані або fixed, або relative або absolute.
Удачі вам! До зустрічей на сторінках блогу
