CSS Positioning — Q1: position: static і top/left Розглянь наступний CSS-код:

.box {
  position: static;
  top: 50px;
  left: 30px;
}

Що відбудеться з елементом .box?

]]> 1 1 true abc Елемент зміститься на 50px вниз і 30px праворуч від свого нормального місця Ні. Зміщення відбувається при position: relative, але не static. Властивості top і left будуть проігноровані — елемент залишиться на своєму місці Правильно! При position: static властивості top, left, right, bottom не мають жодного ефекту. Елемент прив'яжеться до лівого верхнього кута сторінки Ні. Прив'язка до кута сторінки — поведінка position: absolute (відносно батька) або fixed (відносно viewport). Виникне помилка CSS і стиль не застосується Ні. CSS не генерує помилок при некоректних комбінаціях — він просто ігнорує невалідні для контексту властивості. CSS Positioning — Q2: absolute і батьківський контекст Є така структура HTML:

<div class="grandparent">       <!-- position: static -->
  <div class="parent">           <!-- position: relative -->
    <div class="child"></div>   <!-- position: absolute; top: 0; left: 0 -->
  </div>
</div>

Відносно якого елемента буде позиціонований .child?

]]> 1 1 true abc Відносно .grandparent Ні. .grandparent має position: static, тому він не є позиціонованим контейнером для absolute. Відносно .parent Правильно! position: absolute шукає найближчого предка з position відмінним від static. .parent має position: relative — він і стає контейнером. Відносно <body> Ні. До body прив'язався б лише якщо жоден з предків не мав би position відмінний від static. Відносно вікна браузера (viewport) Ні. Прив'язка до viewport — це поведінка position: fixed, а не absolute. CSS Positioning — Q3: position fixed і скрол Яка відмінна ознака елемента з position: fixed на відміну від position: absolute?

]]> 1 1 true abc fixed завжди розміщується в центрі сторінки Ні. fixed не має автоматичного центрування — його позиція визначається властивостями top, right, bottom, left. fixed прив'язується до найближчого батька з position: relative Ні. Це поведінка absolute. Fixed ігнорує всіх батьків. fixed прив'язується до вікна браузера і не рухається при прокручуванні сторінки Правильно! position: fixed завжди прив'язаний до viewport. Саме тому його використовують для навбарів, кнопок "вгору", чатів підтримки. fixed займає місце в нормальному потоці документа Ні. Як і absolute, fixed виводить елемент з нормального потоку — місце в розмітці не зберігається. CSS Positioning — Q4: z-index і вимоги Розглянь два елементи:

.elem-a { z-index: 999; }
.elem-b { position: absolute; z-index: 1; }

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

]]> 1 1 true abc elem-a, бо має більший z-index (999 > 1) Ні. У elem-a відсутній position (або він static). z-index не працює без position відмінного від static. elem-b, бо тільки він має position відмінний від static Правильно! z-index діє лише на позиціоновані елементи (position: relative / absolute / fixed / sticky). elem-a не має position — тому його z-index: 999 ігнорується. Порядок залежить від порядку у HTML-документі Частково вірно для елементів без z-index, але тут елемент b має явний z-index і position — він матиме перевагу. Вони не можуть перекриватися, бо мають різні значення position Ні. Елементи перекриваються незалежно від типу позиціонування. CSS Positioning — Q5: overflow значення (множинний) Які значення властивості overflow додають смугу прокрутки (scrollbar) до елемента? Вибери всі правильні відповіді.

]]> 1 1 false abc overflow: visible Ні. visible дозволяє вмісту виходити за межі контейнера — scrollbar не з'являється. overflow: hidden Ні. hidden обрізає вміст, але не додає scrollbar. overflow: scroll Правильно! scroll завжди показує scrollbar — навіть якщо вміст не переповнює контейнер. overflow: auto Правильно! auto показує scrollbar лише коли вміст дійсно не вміщується — це найбільш "розумне" значення. CSS Positioning — Q6: visibility hidden vs display none Є три елементи підряд: A, B, C. До елемента B застосовано visibility: hidden.

Що відбудеться з розташуванням елементів A і C?

]]> 1 1 true abc C підтягнеться до A — місце після B звільниться Ні. Це поведінка display: none. visibility: hidden лише робить елемент невидимим, але місце зберігається. A і C залишаться на своїх місцях — B невидимий, але займає місце Правильно! visibility: hidden робить елемент прозорим для ока, але він продовжує займати своє місце в потоці. Сусідні елементи не зміщуються. Усі три елементи зникнуть Ні. visibility: hidden застосовується лише до конкретного елемента (і його нащадків), якщо не задано інше. B стане напівпрозорим (50% opacity) Ні. visibility: hidden робить елемент повністю невидимим. Для напівпрозорості використовують opacity: 0.5. CSS Positioning — Q7: position sticky — умови роботи Розробник додав до заголовка секції такий стиль:

.section-title {
  position: sticky;
  top: 0;
}

Але "прилипання" не працює. Яка найбільш вірогідна причина?

]]> 1 1 true abc Потрібно також вказати left: 0 Ні. Для вертикального sticky достатньо top. left не є обов'язковим. position: sticky не підтримується сучасними браузерами Ні. sticky підтримується всіма сучасними браузерами (Chrome, Firefox, Safari, Edge). Один з батьківських елементів має overflow: hidden або overflow: auto Правильно! Це найпоширеніша причина. Якщо батько "ховає" переповнення, sticky елемент не має скролящого контейнера для "прилипання". Треба перевірити всіх батьків аж до body. Елемент повинен мати фіксовану висоту для роботи sticky Ні. Висота елемента не впливає на роботу position: sticky. CSS Positioning — Q8: overflow-x та overflow-y Потрібно зробити блок коду, де:

довгі рядки прокручуються горизонтально
вертикальний вміст обрізається (не виходить за межі)

Який CSS це реалізує?

]]> 1 1 true abc overflow: scroll; Ні. Це додасть скролбар в обох напрямках, але вертикальний вміст не буде обрізатись. overflow-x: hidden; overflow-y: auto; Ні. Це обріже горизонтальний вміст і додасть вертикальний скрол — навпаки від завдання. overflow-x: auto; overflow-y: hidden; Правильно! overflow-x: auto додає горизонтальний скрол за потребою, а overflow-y: hidden обрізає вертикальний вміст. overflow: auto hidden; Ні. Такий синтаксис скорочення не підтримується в CSS. Потрібно окремо вказувати overflow-x і overflow-y. CSS Positioning — Q9: які значення виводять з потоку (множинний) Які значення властивості position виводять елемент з нормального потоку документа (тобто елемент більше не займає місця в розмітці)? Вибери всі правильні відповіді.

]]> 1 1 false abc position: static Ні. static — це значення за замовчуванням, елемент залишається в нормальному потоці. position: relative Ні. relative зміщує елемент візуально, але його місце в потоці зберігається. position: absolute Правильно! absolute повністю виводить елемент з потоку — сусідні елементи його ігнорують. position: fixed Правильно! fixed також виводить елемент з потоку і прив'язує його до viewport. position: sticky Ні. sticky частково залишається в потоці — до досягнення порогу поводиться як relative. CSS Positioning — Q10: центрування через transform Розглянь CSS для модального вікна:

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Навіщо потрібен рядок transform: translate(-50%, -50%)?

]]> 1 1 true abc Щоб зробити вікно напівпрозорим Ні. Прозорість задається через opacity. transform: translate відповідає за зміщення елемента. top: 50%; left: 50% поміщає центр елемента в центр екрану — translate не потрібен Ні. top: 50%; left: 50% поміщає в центр екрану лівий верхній кут елемента, а не його центр. Тому вікно буде зміщене вправо-вниз відносно центру. top/left ставить лівий верхній кут елемента в центр екрану, а translate(-50%, -50%) зміщує елемент на половину його власної ширини і висоти назад — досягаючи справжнього центрування Правильно! Це класичний трюк CSS. Спочатку лівий верхній кут в центрі, потім transform зміщує елемент на -50% його власного розміру — і центр елемента збігається з центром екрану. Без transform модальне вікно не отримає position: fixed Ні. position: fixed не залежить від transform. Вони є незалежними властивостями.