18.02.15 21.5K

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

Переваги верстки за допомогою тега

Існує два основних типи побудови структури сайту:

• Таблична;
• Блокова.

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

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

Крім високої швидкості завантаження блочна побудова сайту дозволяє в кілька разів зменшити обсяг коду html. У тому числі й за рахунок використання класів CSS.

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

Блокову побудову на основі тегів також називають шаровим, а самі блоки шарами. Це пов'язано з тим, що при використанні певних значень властивостей їх можна розміщувати один поверх іншого подібно до шарів у Photoshop.

Засоби позиціонування

У блоковій верстці позиціонування шарів краще здійснювати за допомогою каскадних таблиць стилів. Основною властивістю CSS, що відповідає за розташування, є float.
Синтаксис властивості:
float: left | right | none | inherit ,
Де:

• left – вирівнювання елемента лівим краєм екрана. Обтікання іншими елементами відбувається праворуч;
• right – вирівнювання праворуч, обтікання іншими елементами – ліворуч;
• none - обтікання не допускається;
• inherit – наслідування значення батьківського елемента.

Розглянемо полегшений приклад позиціонування блоків div за допомогою цієї властивості:

#left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height: 100px; float: right; background: rgb(0,2 Правий блок

Тепер постараємося за допомогою цієї властивості розташувати третій div по центру сторінки. Але, на жаль, у float немає значення center. А при завданні новому блоку значення вирівнювання вправо чи вліво він зсувається у вказану сторону. Тому залишається лише всім трьом блокам встановити float: left :
Але це не є оптимальним варіантом. При зменшенні вікна усі шари вишиковуються в один ряд по вертикалі, а при збільшенні розмірів – прилипають до лівого краю вікна. Тому потрібен досконаліший спосіб вирівнювання div по центру. Центрування шарів

У наступному прикладі ми використовуватимемо шар-контейнер, в якому розмістимо інші елементи. Це вирішує проблему усунення блоків один щодо одного при зміні розмірів вікна. Центрування контейнера посередині здійснюється за допомогою завдання властивостей margin нульового значення відступів від верхнього краю та auto з боків (margin: 0 auto ):

#container ( width: 600px; margin: 0 auto; ) #left ( width: 200px; height: 100px; float: left; background: rgb(255,51,102); ) #right ( width: 200px; height : left; background: rgb(0,255,153); ) #center ( width: 200px; height: 100px;

Цей приклад показує, як можна відцентрувати div по горизонталі. А якщо трохи відредагувати наведений вище код, то можна досягти вертикального вирівнювання блоків. Для цього потрібно лише змінити довжину шару-контейнера (зменшити його). Тобто після редагування його css клас має виглядати так:

Після зміни всі блоки вишикуються строго в ряд посередині. І їхнє положення не зміниться за будь-яких розмірів вікна браузера. Ось як виглядає таке центрування div центром по вертикалі:

У наступному прикладі для центрування шарів усередині контейнера ми використали низку нових властивостей css :

#container ( width: 450px; height:150px; margin:0 auto; background-color:#66CCFF; ) #left ( width: 100px; height: 100px; background: rgb(255,51,102); display: inline-lock vertical-align: middle; margin-left: 35px; ) #right ( width: 100px; height: 100px; background: rgb(0,255,153); #center ( width: 100px; height: 100px; background: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; )

Короткий опис властивостей css та їх значень, які ми використовували в даному прикладі для центрування div всередині div :

• display: inline-block – вирівнює блоковий елемент у рядок та забезпечує його обтікання іншим елементом;
• vertical-align: middle – вирівнює елемент посередині щодо батьківського;
• margin-left – встановлює відступ зліва.

Як із шару зробити посилання

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

#layer1( width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; ; ) Посилання на наш сайт

У цьому прикладі за допомогою рядка display: block ми задали посилання значення блокового елемента. А щоб вся висота блоку div стала посиланням, встановили height: 100%. Приховування та відображення блокових елементів

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

Особливо це стосується головної сторінки, вартість розміщення реклами на якій є найвищою. Тому і постає проблема, куди б «впхнути» ще один рекламний банер. І тут вже вирівнюванням div по центру сторінки ніяк не відбудешся!

Більш раціональним рішенням є зробити який-небудь блок, що приховується. Ось простий приклад такої реалізації:

#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( layer1="none"; ) document.getElementById("layer1").style.display=layer1;

Це чарівна кнопка. Натискання на неї приховає або відобразить блок, що приховується.

Блоковий елемент HTML - це такий елемент, який займає за замовчуванням всю ширину батьківського елемента. Батьківським елементом може бути інший блоковий елемент або вікно браузера. Блоковому елементу за допомогою властивостей CSS можна встановити ширину (width) і висоту (height). Позиціонуванням блокових елементів називається процес їх розташування всередині вікна браузера та відносного друга за допомогою CSS властивостей position, left, top, right та bottom. Властивість CSS position призначена для завдання одного з чотирьох доступних видів позиціонування: static (за умовчанням), absolute (абсолютна), fixed (фіксована) та relative (відносна). Інші CSS властивості, а саме left, top, right і bottom призначені для завдання відстаней щодо лівого, верхнього, правого та нижнього краю батьківського елемента. Також блокові елементи при заданні певних властивостей можуть накладатися один одного, і цю можливість можна використовувати на сайтах.

За замовчуванням (static)

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

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

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

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

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

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

Відносне позиціонування задається за допомогою відстаней left, top, right і bottom щодо його поточного положення.

Однак таке положення блоку можна створити за допомогою властивості margin (відступи).

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

Розглянемо варіанти:

При відносному позиціонуванні блоку слід задати властивість position:relativeта властивості усунення. Зміщення в цьому випадку відбуватиметься не щодо "батьківського" елемента (як при абсолютному позиціонуванні), а щодо самого блоку нормального потоку. Це буде зрозуміліше на прикладі. Нехай у нас є html-сторінка з трьома div-ами:

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

Давайте задамо в таблиці стилів розміри та межі цих блоків:

#blok1, #blok2, #blok3 ( border:1px solid red; width:150px; height:50px; )

Зараз наша сторінка у браузері виглядає так:

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

#blok1, #blok2, #blok3 ( border:1px solid red; width:150px; height:50px; ) #blok2( position:relative; left:50px; top:25px; )

Тепер наша сторінка виглядає так:

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

Плаваючі блоки

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

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

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

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


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


• none- блок не переміщається та позиціонується згідно з властивістю position.

Давайте подивимося на прикладі. Нехай у нас є html-сторінка з наступним кодом:

Позиціювання блоків

Текст блоку 1

І сторінка style.css з наступним кодом:

#blok1( border:1px solid red; width:150px; height:50px; )

Зараз наша сторінка у браузері виглядає так:

Давайте зробимо наш блок плаваючим і притиснемо його до лівого краю:

#blok1( border:1px solid red; width:150px; height:50px; float:left; )

Тепер давайте притиснемо блок до правого краю:

#blok1( border:1px solid red; width:150px; height:50px; float:right; )

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

А що буде, якщо плаваючих блоків на сторінці кілька? Давайте додамо в нашу html-сторінку ще один блок:

Позиціювання блоків

Текст блоку 1

Текст блоку 2

Просто якісь елементи на сторінці. Це може бути просто текст, посилання, списки, зображення і т.д.

І поставимо їм різні значення властивості float:

#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; )

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

А якщо в них будуть однакові значення? Наприклад:

#blok1( border:1px solid red; width:150px; height:50px; float:left; ) #blok2( border:1px solid red; width:150px; height:50px; float:left; )

Тоді другий блок притиснеться до правого краю першого блоку:

Аналогічно буде ситуація за однакових значень right:

#blok1( border:1px solid red; width:150px; height:50px; float:right; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; )

Зверніть увагу: спочатку до правого краю притисне блок 1, а вже до нього притисне блок 2.

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

• left- блок повинен розташовуватися нижче за всі лівосторонні блоки.


• right- блок повинен розташовуватися нижче за всі правосторонні блоки.


• both- блок повинен розташовуватися нижче за всі плаваючі блоки.


• none- ніяких обмежень немає, це значення за промовчанням.

Давайте в нашому останньому прикладі поставимо цю властивість для другого блоку:

#blok1( border:1px solid red; width:150px; height:50px; float:right; ) #blok2( border:1px solid red; width:150px; height:50px; float:right; clear:right; )

Тепер вийшло так, як і хотілося: один блок під іншим:

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

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

Позиціювання блоків

шапка сайту

Контент

блок новин

низ сайту

На сторінці style.css задамо спочатку розміри та фон для наших блоків:

#header( background:darkred; width:715px; height:100px; ) #menu( background:oldlace; width:190px; height:300px; ) #content( background:oldlace; width:525px; height:300px; ) #fo ( background:darkred; width:715px; height:30px; ) #news( background:yellow; width:150px; height:280px; )

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

#header( background:darkred; width:715px; height:100px; ) #menu( background:oldlace; width:190px; height:300px; float:left; ) #content( background:oldlace; width:525px; height:300px ; float:left;) #footer( background:darkred; width:715px; height:30px; ) #news( background:yellow; width:150px; height:280px;

Наша сторінка у браузері виглядає так:

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

Чому ж у нас так не вийшло? Тому що наш блок newsу html-коді розташовується нижче тексту і його буде обтікати тільки той текст, який розташований нижче за нього. Щоб виправити це треба помістити наш div="news"вище тексту (тобто до слова "контент"):

Позиціювання блоків

шапка сайту

блок новин

Контент

низ сайту

Ось тепер наш блок новин знаходиться на своєму місці:

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

#news( background:yellow; width:150px; height:280px; float:right; margin:10px; )

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

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

Фіксовані блоки

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

У фіксованих блоків є одна істотна вада: вони не підтримуються браузерами Internet Explorer. А тому використовувати їх поки що не слід. Тому тут лише вкажемо синтаксис такого правила, якщо хочете спробуйте самі (наприклад, у браузері Opera).

#blok( position:fixed; left:0px; top:0px; )

Блок з ідентифікатором "blok" при прокручуванні сторінки залишатиметься на місці.

На сьогодні все. У наступному уроці ми познайомимося ще з деякими властивостями блоків та їх видами.

У наші дні веб-розробники можуть створювати складні розкладки веб-сторінок, використовуючи різні техніки 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:

Програми