» » Позиціонування в веб-дизайні

Позиціонування в веб-дизайні

Розуміння принципів позиціонування в інтернеті критично для створення чуйного дизайну. Крім того, воно допомагає говорити з розробниками на одній мові і приймати кращі рішення. У порівнянні зі статичними інструментами для дизайну (Photoshop, Illustratorm Sketch), позиціонування в веб-дизайні трохи більш складне, тому що позиція елемента залежить від безлічі факторів кшталт розміру екрану або прокрутки сторінки.

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

Z-індекс
Позиціонування в веб-дизайні


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

Використовуйте для кнопок та інших елементів, на які можна клікнути. Уникайте перекривання таких елементів текстом, інакше вони стануть неклікабельни.

Statichnaya позиція (статичний)
Позиціонування в веб-дизайні


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

Спробуйте збільшити вашу сторінку у всіх браузерах. Додавання мінімальних і максимальних значень для розмірів по горизонталі і по вертикалі допоможе вам зберегти дизайн ідеальним. Також стежте за блоками тексту із змінним контентом - вони теж можуть зламати ваш дизайн.

Абсолютна позиція (absolute)
Позиціонування в веб-дизайні


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

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

Відносна позиція (relative)
Позиціонування в веб-дизайні


Щодо позиційований елементи поводяться як статичні, але вони служать як «рамки-обмежувача» для абсолютно позиціонуються дочірніх елементів. Ці дочірні елементи будуть позиціонуватися щодо цієї самої рамки.

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

Фіксована позиція (fixed)
Позиціонування в веб-дизайні


Фіксовані елементи завжди розташовуються в певній точці щодо вікна браузера. Їхнє становище не змінюється при прокручуванні.

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

Реальне життя
У реальному житті типи позиціонування часто змінюються і комбінуються в процесі перегляду сторінки. Наприклад, якщо вам потрібно банер, який при прокручуванні буде закріплюватися в певній точці екрану, то на самому початку сторінки у нього буде абсолютна позиція, а при прокручуванні ми повинні поміняти її на фіксовану за допомогою невеликого javascript-коду .

Це основи, але є ще більш глибока інформація. Що якщо вам треба розмістити два елементи «пліч-о-пліч»? У такому випадку float -властивості, рядкові елементи і відступи зіграють свою роль (ми розповімо про це пізніше). У FROONT ми, в основному, комбінуємо статичне позиціонування і відступи, так як це полегшує подальшу підтримку відступу.


1568 30.01.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру