Css розташування блоків. Позиціонування елементів з різних боків блоку

Влад Мержевич

Позиціонуванням називається положення елемента системі координат. Розрізняють чотири типи позиціонування: нормальне, абсолютне, фіксоване та відносне. Залежно від типу, який встановлюється через властивість position, змінюється система координат.

Завдяки комбінації властивостей position, left, top, right і bottom елемент можна накладати один на інший, виводити в точці з певними координатами, фіксувати у зазначеному місці, визначити положення одного елемента щодо іншого та ін. Подібно до інших властивостей CSS управління позиціонуванням доступне через скрипти. Таким чином, можна динамічно змінювати положення елементів без перезавантаження сторінки, створюючи анімацію та різні ефекти.

Нормальне позиціонування

Якщо для елемента властивість position не задано або значення static , елемент виводиться в потоці документа як зазвичай. Іншими словами, елементи відображаються на сторінці, як вони йдуть у вихідному коді HTML.

Властивості left, top, right, bottom якщо визначені, ігноруються.

Абсолютне позиціонування

При абсолютному позиціонуванні елемент не існує у потоці документа і його положення задається щодо країв браузера. Задати цей тип можна через значення absolute властивості position. Координати вказуються щодо країв вікна браузера, що називається «видимою областю» (рис. 3.42).

Рис. 3.42. Значення властивостей left, right, top та bottom при абсолютному позиціонуванні

Для режиму характерні такі особливості.

  • Ширина шару, якщо вона не задана явно, дорівнює ширині контенту плюс значення полів, меж та відступів.
  • Шар не змінює своє вихідне положення, якщо у нього немає властивостей right, left, top та bottom.
  • Властивості left і top мають більш високий пріоритет порівняно з right та bottom. Якщо left і right суперечать одне одному, то значення right ігнорується. Те саме стосується і bottom.
  • Якщо left задати негативне значення, шар піде за лівий край браузера, смуги прокручування при цьому не виникне. Це один із способів сховати елемент від перегляду. Те саме стосується і властивості top , тільки шар піде за верхній край.
  • Якщо left задати значення більше ширини видимої області або вказати right з негативним значенням, з'явиться горизонтальна смуга прокручування. Подібне правило працює і з top, тільки мова піде про вертикальну смугу прокручування.
  • Одночасно зазначені властивості left і right формують ширину шару, але якщо width не вказано. Варто додати властивість width і значення right буде проігноровано. Аналогічно відбудеться і з висотою шару, тільки беруть участь властивості top , bottom і height .
  • Елемент з абсолютним позиціонуванням переміщається разом із документом під час його прокручування.

Властивість position зі значенням absolute можна використовуватиме створення ефекту кадрів. Крім абсолютного позиціонування для елементів необхідно призначити властивість overflow зі значенням auto. Тоді при перевищенні контентом висоти видимої області з'явиться смуга прокручування. Висота та ширина «фреймів» формується автоматично шляхом одночасного використання властивостей left, right для ширини та top, bottom для висоти (приклад 3.31).

Приклад 3.31. Створення аналога кадрів

Абсолютне позиціонування

Плов по-ферганськи

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

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

Ретельно перемішайте готовий плов, перекладіть у велику страву, зверху розкладіть м'ясо.

Результат цього прикладу показано на рис. 3.43. Шар header виводиться в потоці як завжди, а для шарів sidebar і content встановлено абсолютне позиціонування.

Рис. 3.43. Застосування абсолютного позиціонування

У браузері IE6 для абсолютно позиціонованих елементів не можна одночасно задати властивості left, right та top, bottom.

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

Для початку створимо порожній шар з ідентифікатором floatTip та визначимо його стиль. Обов'язковими повинні бути три стильові властивості - position зі значенням absolute, display зі значенням none приховує шар і width задає ширину шару з підказкою. Інші властивості використовуються за бажанням розробника та призначені для зміни оформлення шару (приклад 3.32).

Приклад 3.32. Стиль для спливаючої підказки

#floatTip ( position: absolute; /* Абсолютне позиціонування */ width: 250px; /* Ширина блоку */ display: none; /* Ховаємо від показу */ border: 1px solid #000; /* Параметри рамки */ padding: 5px /* Поля навколо тексту */ font-family: sans-serif;/* Рублений шрифт */ font-size: 9pt;/* Розмір шрифту */ color: #333; /* Колір фону */ )

Сам скрипт складається з двох функцій - moveTip() відстежує рух миші і відповідно до координат курсору змінює положення шару, і toolTip() управляє видимістю шару і виводить у ньому бажаний текст (приклад 3.33).

Приклад 3.33. Скрипт для виведення шару

Document.onmousemove = moveTip; function moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Ширина шару // Для браузера IE if (document.all) ( x = event.x + document.body.scrollLeft y = event.y + document.body.scrollTop; // Для інших браузерів ) else ( x = e.pageX; // Координата X курсору y = e.pageY; // Координата Y курсору ) // Показувати шар праворуч від курсора if ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }

Для зручності та універсальності скрипт слід винести в окремий файл та підключати його через атрибут src тега

" + "Об'єктив: Canon EF 24-105 f/4L IS USM
" + "Спалах: Canon Speedlite 580 EX
" + "Витримка: 1/125
Діафрагма: 5.6")" onmouseout="toolTip()" />

Результат цього прикладу показано на рис. 3.44. Зверніть увагу, що перенесення тексту при виклику функції toolTip() зроблено для зручності сприйняття та мають синтаксис JavaScript. У Safari скрипт іноді не працює при перенесенні тексту, у цьому випадку текст слід записати в один рядок. До стилів додано властивість CSS3 opacity, яка додає для шару невелику прозорість. У IE до версії 9.0 ця властивість не підтримується.

Рис. 3.44. Підказка, що випливає, виведена за допомогою JavaScript

Фіксоване становище

Фіксоване положення шару задається значенням fixed властивості position і за своєю дією схоже абсолютне позиціонування. Але на відміну від нього прив'язується до вказаної властивостями left, top, right і bottom точці на екрані і не змінює свого положення під час прокручування веб-сторінки. Ще одна різниця від absolute полягає в тому, що при виході фіксованого шару за межі видимої області праворуч або знизу від неї не виникає смуг прокручування.

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

Приклад 3.35. Фіксований підвал

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Фіксований підвал

Усі перелічені на сайті методи лову лева є теоретичними та базуються на обчислювальних методах. Автор не гарантує вашої безпеки при їх використанні і знімає з себе будь-яку відповідальність за результат. Пам'ятайте, лев це хижак та небезпечна тварина!

Результат прикладу показано на рис. 3.45. Оскільки фіксований підвал накладається на текст і приховує його, додано відступ знизу для селектора BODY. Браузер IE6 не підтримує значення fixed, тому в ньому цей приклад працюватиме некоректно.

Рис. 3.45. Підвал унизу сторінки

Відносне позиціонування

Якщо встановити значення relative властивості position , то положення елемента встановлюється щодо його вихідного місця. Додавання властивостей left, top, right і bottom змінює позицію елемента і зсуває його в ту чи іншу сторону від початкового розташування. Позитивне значення left визначає зсув праворуч від лівої межі елемента, негативне - зсув ліворуч. Позитивне значення top визначає зсув елемента вниз (рис. 3.46), негативне - зсув вгору.

Рис. 3.46. Значення властивостей left та top при відносному позиціонуванні

Властивості bottom і right справляють зворотний ефект. При позитивному значенні right зрушує елемент ліворуч від його правого краю, при негативному зсуває вправо (рис. 3.47). При позитивному значенні bottom елемент піднімається вгору, при негативному опускається вниз.

Рис. 3.47. Значення властивостей right та bottom при відносному позиціонуванні

Для відносного позиціонування характерні такі особливості.

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

У прикладі 3.36 показано зсув тексту заголовка вниз для надання йому особливого стилю написання.

Приклад 3.36. Заголовок тексту

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Заголовок

Аз та буки шрифтової науки

Шрифт - це засіб вираження дизайну, а не якогось банального читання.

Результат цього прикладу показано на рис. 3.48.

Рис. 3.48. Зсув тексту щодо вихідного положення

Вкладені шари

Зазвичай відносне позиціонування саме собою застосовується не часто, оскільки є низка властивостей виконують практично ту саму роль, наприклад, той самий margin . Але поєднання різних типів позиціонування для вкладених шарів є одним із зручних та практичних прийомів верстки. Якщо для батьківського елемента задати relative , а для дочірнього absolute , то зміна системи координат відбудеться і положення дочірнього елемента при цьому вказується щодо його батька (рис. 3.49).

Рис. 3.49. Значення властивостей left, right, top та bottom у вкладених шарах

Відлік координат ведеться від внутрішнього краю кордону, значення полів не враховуються. У наступному прикладі текст розташовується в нижньому правому куті шару біля кордону, ігноруючи властивість padding .

Текст

Завдяки використанню чотирьох властивостей left, right, top, bottom для керування положенням внутрішнього шару, розміри батьківського шару знати не обов'язково. Це розширює сферу застосування позиціонування, тому position досить активно застосовується при верстка різних елементів. Як приклад візьмемо накладення на фотографію різної інформації: кількість коментарів до неї, посилання «Додати коментар», «Інформація про автора» та «Додати до обраного». Загалом результат має бути приблизно таким, як на рис. 3.50.

Рис. 3.50. Фотографія з накладеними елементами

Сам код наведено у прикладі 3.37. Для шару photo встановлено відносне позиціонування, а для внутрішніх шарів img (виведення фотографії), comment (число коментарів) та tool (посилання внизу фотографії) встановлено абсолютне позиціонування.

Приклад 3.37. Позиціювання шарів

XHTML 1.0 CSS 2.1 CSS 3 IE 7+ IE 9+ Cr Op Sa Fx

Позиціювання шарів

134

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

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

Типи позиціонування елементів

Основна властивість CSS, яка дозволяє керувати позиціонуванням елементів на сторінці це властивість position , вона повідомляє браузеру, який тип позиціонування використовується для елемента ( статичний- static , відносний- Relative , абсолютний– absolute , або фіксований- fixed).

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

Абсолютне позиціонування

Як ви помітили, елементи, які мають абсолютне позиціонування, відокремлюються від основного потоку сторінкищо може призводити до нашарування елементів один на одного. Ще один нюансроботи з елементами, які мають абсолютне позиціонування, це те, що вони не можуть бути плаваючими. Плаваючі елементи можуть бути тільки елементи, які мають статичне позиціонування(static ), тобто те, що встановлено у елемента за промовчанням. Методи роботи з плаваючими елементами ми з Вами розглядали у статті підручника " ".

Відносне позиціонування

Наступний тип позиціонування, який ми розглянемо . Елементи, для яких задано відносне позиціонування(position: relative) зміщуються (розміщуються), або іншими словами.

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

</span>Відносне позиціонування елементів
static
class = "relative" > relative
class = "static" > static

І так, що ми зробили в цьому прикладі:

  • Для блоків (елементи
    ), які мають статичне позиціонування(за замовчуванням) встановили висоту 50 пікселів та колір заднього фону – червоний.
  • Розмістили між блоками елемент з відносним позиціонуванням(position : relative ), встановили для нього висоту 100 пікселів та колір заднього фону зелений. Крім того вказали, що він зміщується щодо його поточної позиціївід верхнього краю на 50 пікселів, і з лівого краю на 100 пікселів, викликаючи у своїй переповнення документа.

Результат нашого прикладу:

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

На практиці Вам, швидше за все, не доведеться переміщати елементи, які мають відносне позиціонування. Основна ідея відносного позиціонуванняполягає в тому, щоб не зрушити кудись елемент, а створити "контейнер" для елемента, який має абсолютне позиціонування . Іншими словами, вкладені елементи будуть зміщуватися не щодо краю вікна браузера, а щодо цього елемента, який матиме відносне позиціонуванняі знаходиться в основному потоці документа. Детальніше цей момент ми розглянемо далі в цій статті підручника.

Фіксоване позиціонування

Третійтип позиціонування, який ми розглянемо . При фіксоване позиціонуванняелемент зсувається щодо заданого краю вікна браузера. Відмінна риса цього позиціонування полягає в тому, що при прокручуванні сторінки елемент залишається на одному місцітобто, грубо кажучи, він прокручується разом зі сторінкою (елемент зафіксований).

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

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

</span>Фіксоване позиціонування елементів
fixed
class = "container" >

Давайте розберемо, що ми зробили у цьому прикладі:

  • Встановили для елементів і висоту рівну 100%, це нам дозволить задати висоту у відсотках для нашої бічної панелі. Крім того, ми прибрали зовнішні відступи (margin) для цих елементів, це необхідно, щоб усунути вбудовані стилі браузера.
  • Для нашої бічної панелі встановили висоту, що дорівнює батьківському елементу (100%), встановили ширину 15% від батьківського елемента і встановили колір заднього фону. червоний. Крім того, вказали, що наша бічна панель має фіксоване позиціонування, що дозволяє її начебто приліпити до екрану. Щоб наша панель відображалася праворуч, ми встановили значення right рівним 0 (зсув позиціонованого елемента від правого краю вікна браузера).
  • Для демонстрації фіксованого позиціонуваннями створили контейнер заввишки 2000 пікселів. Тепер якщо прокрутити сторінку наша бічна панель залишиться на місці, а вміст контейнера (основного вмісту) прокручуватиметься.

Результат нашого прикладу:

Статичне позиціонування

Та й останній тип позиціонування це статичне позиціонування(static), ми з Вами вже неодноразово говорили про нього. Статичне позиціонуванняце класичне у потоці HTML документа

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

Просунуте абсолютне позиціонування

Перед тим як перейти до розгляду просунутого застосування абсолютного позиціонування, хочу звернути Вашу увагу на те, що якщо ви не вказуєтезначення вертикальної позиції елемента з абсолютним позиціонуванням(top, або bottom), або навпаки горизонтальної позиції (left, або right), то браузер залишить елемент у тому самому місці на сторінці, де він знаходиться у загальному потоці(буде розміщений поверх вмісту, якщо він є).

Ми вже з Вами дізналися про те, що елемент з абсолютним позиціонуванням(position: absolute) позиціонується щодо заданого краю його предка, при цьому предок повинен мати значення position відмінне від, встановленого за умовчанням- static , інакшевідлік (зміщення) вестиметься щодо зазначеного краю вікна браузера. Настав час розглянути такий приклад:

</span>Абсолютне позиціонування щодо предка
relative
class = "container" > container
class = "absolute" > absolute

Давайте уважно розберемо, що ми зробили у цьому прикладі:

  • Спочатку ми розмістили блок (елемент
    ), котрий має відносне позиціонування. Вказали для нього внутрішній відступ від верху (margin-top) рівний 100 пікселів, задали ширину, висоту та колір заднього фону.
  • Далі всередині нього розмістили блоковий елемент (елемент
    ), який має висоту 100 пікселів та колір заднього фону жовтий. Як ви розумієте, цей елемент має статичне позиціонування(за замовчуванням), так як значення властивості position не успадковується, і він не успадкував від батьківського блоку відносне позиціонування.
  • Потім ми помістили всередині нашого контейнера з статичним позиціонуваннямелемент, який має абсолютне позиціонування. Вказали для нього ширину та висоту рівними 50 пікселів та колір заднього фону червоний. Зверніть увагу на найважливіший момент, що цей елемент позиціонується не щодо вікна браузера, не щодо батьківського елемента, а щодо свого предка, який має позиціонування, відмінне від статичного! У результаті наш елемент ми розмістили у верхньому правому куті його предка з відносним позиціонуванням.

Результат нашого прикладу:

Давайте підсумуємо вивчену у цій статті підручника інформацію про позиціонування елементів:

  • Статичне позиціонуванняце класичне розміщення елементів зверху донизу(елементи відображаються у порядку, як вони вказані у потоці HTML документа), воно вважається значенням за промовчанням всім елементів.
  • Елемент позиціонується щодо вікна браузераякщо у нього фіксоване позиціонування(Елемент зафіксований при прокручуванні документа).
  • Елемент позиціонується щодо вікна браузераякщо у нього абсолютне позиціонування, і він не вкладено в елемент, який має позиціонування, відмінне від статичного .
  • Елемент, для якого поставлено відносне позиціонуваннязміщується щодо положення у потоці документа (щодо його поточної позиції).
  • Елемент позиціонується щодо сторін іншого елементау тому випадку, якщо він має предка, або батька з абсолютним, відноснимабо фіксованимпозиціонуванням.

Запитання та завдання на тему

Перед тим як перейти до вивчення наступної теми, пройдіть практичне завдання:


2016-2019 Денис Большаков, зауваження та пропозиції щодо роботи сайту Ви можете надіслати на адресу сайт@gmail.com

У наші дні веб-розробники можуть створювати складні розкладки веб-сторінок, використовуючи різні техніки CSS. Деякі з цих технік мають довгу історію (флоати), інші (флексбокс) досягли популярності останніми роками.

У цій статті ми уважно розглянемо деякі маловідомі речі щодо CSS-позиціонування .

Перед початком, давайте коротко згадаємо основи різних типів позиціонування.

Огляд доступних способів позиціонування

Властивість CSS position визначає тип позиціонування елемента.

Опції для позиціонування

static – це значення властивості позиціонування за умовчанням. Ми повідомляємо, що цей елемент не використовує позиціонування - позиціонування застосовується лише якщо задати тип позиціонування, відмінний від дефолтного.

Для цього треба властивості position задати одне з наступних значень:

  • relative
  • absolute
  • fixed
  • sticky

І лише після завдання позиціонування, можна використовувати властивості, що зміщують елемент:

  • right
  • bottom
  • Початкове значення цих властивостей - ключове слово auto.

Потрібно враховувати, що якщо елемент має властивість position у значенні absolute або fixed , то він є абсолютно позиціонованим елементом. Також у позиціонованих елементів починає працювати властивість z-index, що визначає порядок накладання.

Відмінності між основними способами позиціонування

Тепер швидко розглянемо три базові різницю між доступними типами позиціонування:

  • абсолютно (absolute) позиціоновані елементи повністю видаляються з потоку, їхнє місце займають найближчі сусіди.
  • щодо позиціоновані (relative) і приклеєні (sticky) зберігають своє місце у потоці та його найближчі сусіди не займають його. Однак відступи цих елементів не займають простір, а повністю ігноруються іншими елементами і це може спричинити накладення елементів.
  • фіксовані (fixed) елементи (а фіксоване позиціонування є різновидом абсолютного) завжди позиціонуються щодо зони видимості (ігноруючи наявність позиціонування у предків), тоді як приклеєні елементи позиціонуються щодо найближчого предка зі скролінгом (overflow:auto). І лише за відсутності таких предків вони позиціонуються щодо зони видимості.

Докладніше це можна розглянути в демо:

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

Позиціонування елементів із абсолютним типом позиціонування

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

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

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

Це демонструється наступним прикладом:

У цьому демо зелений блок спочатку спозиційований абсолютно з нульовими відступами bottom: 0 і left: 0, його предку (червоному блоку) позиціонування не ставилося взагалі.

Однак, ми відносно позиціонували зовнішню обгортку (елемент із класом jumbotron). Зауважте, як змінюється позиціонування зеленого блоку при зміні типу позиціонування його предків.

Абсолютно позиціоновані елементи ігнорують властивість float

Якщо ми застосовуємо до плаваючого елемента абсолютне або фіксоване позиціонування, властивість float отримає значення none. З іншого боку, якщо ми поставимо відносне позиціонування, елемент залишиться плаваючим.

Погляньте на відповідне демо:

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

Абсолютно позиціоновані малі елементи стають блоковими

Рядковий елемент з абсолютним або фіксованим позиціонуванням набуває властивостей блокового елемента. Докладніше конвертація малих елементів у блокові описана в таблиці.

У цьому випадку ми створили два різні елементи. Перший (зелений блок) це блоковий елемент, а другий (червоний блок) – малий. Спочатку видно лише зелений блок.

Червоний блок не видно тому, що задані властивості width і height працюють тільки з блочними і рядково-блочними елементами, а так як в ньому немає контенту, у нього немає ніяких розмірів.

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

У абсолютно позиціонованих елементів немає схлопування зовнішніх відступів

За умовчанням, коли два вертикальних зовнішніх відступу стикаються, вони об'єднуються в один, рівний максимальному з них. Це називається схлопування зовнішніх відступів.

Поведінка абсолютно позиціонованих елементів тут схожа на плаваючі елементи - їх відступи не поєднуються із сусідніми.

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

Але як ми можемо запобігти хлопуванню відступів? Нам потрібно помістити між ними якийсь роздільник.

Це може бути внутрішній відступ (padding) або кордон (border), їх можна застосовувати як до батьківського, так і дочірнього елемента. Інший варіант – додати клірфікс до батьківського елементу.

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

Чи використовували ви колись проценти замість пікселів для позиціонування елементів? Якщо відповідь так, то ви знаєте, що усунення елемента залежить від вибраних одиниць обчислення (пікселів або відсотків).

Це трохи бентежить, правда? Отже, спочатку подивимося, що каже специфікація про усунення у відсотках:

Зміщення у відсотках від ширини (для left та right) або висоти (top або bottom) батьківського блоку. Для приклеєних елементів зсув розраховується у відсотках від ширини (для left і right) або висоти (top або bottom) потоку. Допустимі негативні значення.

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

Демо показує цю різницю:

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

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

Примітка: як ви, мабуть, знаєте, властивість transform (разом з різними функціями translate) також дозволяє змінити позицію елемента. Але в цьому випадку при використанні відсотків розрахунок відбуватиметься на основі розміру самого елемента, а не його батька.

Висновок

Я сподіваюся, що ця стаття допомогла вам краще зрозуміти позиціонування CSS і пояснила основні складності.

Ви все ще не розумієте, як працює абсолютне позиціонування в CSS і втрачаєте елементи на екрані? Давайте розумітися на цій магії.

Введення у позиціонування

Коли ви встановлюєте position: absolute на перший план виходить не сам елемент, а його батьківський контейнер, адже щодо нього і здійснюється позиціонування в CSS. Складність у цьому, що це завжди безпосередній батько елемента.

Розглянемо код із чотирма дивами, вкладеними один одного за принципом матрьошки.

< body >

< div class = "box-1" >

< div class = "box-2" >

< div class = "box-3" >

< div class = "box-4" > < / div >

< / div >

< / div >

< / div >

< / body >

Блоки box-1, box-2 та box-3 для краси відцентровані за допомогою властивостей margin: auto та властивостей flex CSS. Блок box-4 залишається у своїй дефолтній позиції у потоці документа.

body ( display: flex; ) .box-1, .box-2, .box-3 ( display: flex; margin: auto; )

body (

Display: flex;

Box-1,

Box-2,

Box-3 (

Display: flex;

Margin: auto;

Всі 4 елементи мають стандартне позиціонування. на Наразіверстка виглядає так:


.box-4 без позиціонування

Щодо чого позиціонуємо?

Щоб спозиціонувати себе, елемент має знати дві речі:

  • який батько стане точкою відліку;
  • величину усунення щодо точки відліку (згори, знизу, праворуч чи ліворуч).

Якщо визначити position: absolute для box-4, цей елемент залишить нормальний потік документа. Але зараз він залишається на своєму місці, оскільки координати усунення не задані. Якщо в CSS ширина елемента не визначена, вона дорівнює ширині його вмісту (плюс паддинги і рамка).


.box-4 з абсолютним позиціонуванням без зміщення

Тепер додамо властивості top: 0 та left: 0 . Елемент повинен визначити, який контейнер буде точкою відліку для цих координат. Їй стає найближчий елемент із нестатичною позицією (найчастіше position: relative). box-4 починає по черзі опитувати своїх предків. Ні box-3, ні box-2, ні box-1 не підходять, тому що мають позиціонування в CSS за умовчанням (unset).

Якщо позиціонований предок не знайшовся, елемент розміщується щодо тіла документа (body):


.box-4 з абсолютним позиціонуванням. Батьківські елементи без позиціонування

Якщо встановити position: relative для елемента box-1, то точкою відліку стане він:


.box-4 з абсолютним позиціонуванням. .box-1 з відносним позиціонуванням

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

Як тільки точка відліку знайшлася, все, що вище за неї в DOM-дереві, перестає мати значення.

Якщо встановити position: relative також для box-2, то box-4 позиціонуватиметься щодо нього, адже цей предок ближче.


.box-4 з абсолютним позиціонуванням. .box-2 з відносним позиціонуванням

Аналогічно і для контейнера box-3:

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

Є кілька різних типів позиціонування CSS, кожен із цих типів має власну область дії. У цьому розділі ми збираємося поглянути на кілька різних випадків застосування - створення макетів, що багаторазово використовуються, і унікальне позиціонування одноразових елементів, а також опис декількох методів як це зробити.

Позиціювання через float

Один із способів позиціонування елементів на сторінці - через властивість float. Ця властивість досить універсальна і може застосовуватись різними шляхами.

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

Коли властивість float застосовується до кількох елементів одночасно, це дає можливість створити макет з обтічними елементами розташованими поряд або навпроти один одного, як показано у багатоколонному макеті.

Властивість float приймає кілька значень, два найпопулярніші - це left і right, вони дозволяють елементу розташовуватися ліворуч або праворуч від свого батька.

Img (float: left;)

float на практиці

Давайте створимо загальний макет сторінки з шапкою вгорі, двома колонками у центрі та підвалом внизу. В ідеалі, цю сторінку слід розмітити за допомогою елементів

,
,
Оцінка статті:
1 зірка2 зірки3 зірки4 зірки5 зірок(Поки що оцінок немає)
Завантаження...
Поділитися з друзями:
Подібні публікації