update(CSS): web/css/position (#3900)

Co-authored-by: Vitalii Perehonchuk <vitalii_perehonchuk@epam.com>

Author: undead404

files/uk/web/css/position/index.md

@@ -40,19 +40,19 @@ position: unset;
 
 - `absolute` (абсолютне)
 
-  - : Елемент зникає зі звичайного плину документа, і для нього не виділяється жодного простору у макеті сторінки. Такий елемент позиціонується відносно до свого найближчого позиціонованого предка (якщо такий є) або початкового [контейнерного блока](/uk/docs/Web/CSS/Containing_block#vybir-konteinernoho-bloka). Його остаточна позиція визначена значеннями властивостей `top`, `right`, `bottom` та `left`.
+  - : Елемент зникає зі звичайного плину документа, і для нього не виділяється жодного простору у макеті сторінки. Такий елемент позиціонується відносно до свого найближчого позиціонованого предка (якщо такий є) або початкового [контейнерного блока](/uk/docs/Web/CSS/CSS_display/Containing_block#vybir-konteinernoho-bloka). Його остаточна позиція визначена значеннями властивостей `top`, `right`, `bottom` та `left`.
 
     Це значення створює новий [контекст нагромадження](/uk/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context), коли значення `z-index` відмінне від `auto`. Зовнішні поля абсолютно позиціонованих елементів не [перекриваються](/uk/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) з іншими зовнішніми полями.
 
 - `fixed` (фіксоване)
 
-  - : Елемент зникає зі звичайного плину документа, і для нього не виділяється жодного простору у макеті сторінки. Такий елемент позиціонується відносно свого початкового [контейнерного блока](/uk/docs/Web/CSS/Containing_block#vybir-konteinernoho-bloka), котрим у випадку візуального представлення є область перегляду. Остаточна позиція елемента визначена значеннями властивостей `top`, `right`, `bottom` та `left`.
+  - : Елемент зникає зі звичайного плину документа, і для нього не виділяється жодного простору у макеті сторінки. Такий елемент позиціонується відносно свого початкового [контейнерного блока](/uk/docs/Web/CSS/CSS_display/Containing_block#vybir-konteinernoho-bloka), котрим у випадку візуального представлення є область перегляду. Остаточна позиція елемента визначена значеннями властивостей `top`, `right`, `bottom` та `left`.
 
     Це значення завжди створює новий [контекст нагромадження](/uk/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). При друкові документа такий елемент друкується на одній позиції на _кожній сторінці_.
 
 - `sticky` (липкий)
 
-  - : Елемент позиціонується згідно зі звичайним плином документа, а далі зміщується відносно до свого _найближчого предка з прокручуванням_ та [контейнерного блока](/uk/docs/Web/CSS/Containing_block) (найближчого предка блокового рівня), включно з елементами таблиць, на основі значень властивостей `top`, `right`, `bottom` та `left`. Відступ не впливає на позицію інших елементів.
+  - : Елемент позиціонується згідно зі звичайним плином документа, а далі зміщується відносно до свого _найближчого предка з прокручуванням_ та [контейнерного блока](/uk/docs/Web/CSS/CSS_display/Containing_block) (найближчого предка блокового рівня), включно з елементами таблиць, на основі значень властивостей `top`, `right`, `bottom` та `left`. Відступ не впливає на позицію інших елементів.
 
     Це значення завжди створює новий [контекст нагромадження](/uk/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). Зверніть увагу, що липкий елемент "прилипає" до свого найближчого предка, який має "механізм прокручування" (утворений встановленням властивості `overflow` у значення `hidden`, `scroll`, `auto` чи `overlay`), навіть коли такий предок не є найближчим справді прокручуваним предком.
 
@@ -63,10 +63,10 @@ position: unset;
 
 ### Типи позиціонування
 
-- **Позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/computed_value) значення `position` – одне з наступних: `relative`, `absolute`, `fixed`, `sticky`. (Інакше кажучи, що завгодно, окрім `static`.)
-- **Відносно позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/computed_value) значення `position` – `relative`. Властивості {{Cssxref("top")}} та {{Cssxref("bottom")}} вказують вертикальний відступ від його звичайної позиції; властивості {{Cssxref("left")}} та {{Cssxref("right")}} вказують горизонтальний відступ.
-- **Абсолютно позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/computed_value) значення `position` – `absolute` або `fixed`. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} вказують відступи від країв [контейнерного блока](/uk/docs/Web/CSS/Containing_block) елемента. (Контейнерний блок – то предок, відносно якого позиціонується елемент.) Якщо елемент має зовнішні поля, то вони додаються до відступів. Елемент утворює новий [контекст блокового форматування](/uk/docs/Web/CSS/CSS_display/Block_formatting_context) (КБФ) для свого вмісту.
-- **Липко позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/computed_value) значення `position` – `sticky`. Він розглядається як відносно позиціонований, поки його [контейнерний блок](/uk/docs/Web/CSS/Containing_block) не перетне встановлений поріг (встановлений, наприклад, значенням властивості {{Cssxref("top")}}, відмінним від `auto`) всередині свого кореня плину (чи контейнера, всередині якого він прокручується), після чого буде вважатись "застряглим", поки не зустріне протилежний край свого [контейнерного блоку](/uk/docs/Web/CSS/Containing_block).
+- **Позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/CSS_cascade/computed_value) значення `position` – одне з наступних: `relative`, `absolute`, `fixed`, `sticky`. (Інакше кажучи, що завгодно, окрім `static`.)
+- **Відносно позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/CSS_cascade/computed_value) значення `position` – `relative`. Властивості {{Cssxref("top")}} та {{Cssxref("bottom")}} вказують вертикальний відступ від його звичайної позиції; властивості {{Cssxref("left")}} та {{Cssxref("right")}} вказують горизонтальний відступ.
+- **Абсолютно позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/CSS_cascade/computed_value) значення `position` – `absolute` або `fixed`. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} вказують відступи від країв [контейнерного блока](/uk/docs/Web/CSS/CSS_display/Containing_block) елемента. (Контейнерний блок – то предок, відносно якого позиціонується елемент.) Якщо елемент має зовнішні поля, то вони додаються до відступів. Елемент утворює новий [контекст блокового форматування](/uk/docs/Web/CSS/CSS_display/Block_formatting_context) (КБФ) для свого вмісту.
+- **Липко позиціонований елемент** – елемент, в котрого [обчислене](/uk/docs/Web/CSS/CSS_cascade/computed_value) значення `position` – `sticky`. Він розглядається як відносно позиціонований, поки його [контейнерний блок](/uk/docs/Web/CSS/CSS_display/Containing_block) не перетне встановлений поріг (встановлений, наприклад, значенням властивості {{Cssxref("top")}}, відмінним від `auto`) всередині свого кореня плину (чи контейнера, всередині якого він прокручується), після чого буде вважатись "застряглим", поки не зустріне протилежний край свого [контейнерного блоку](/uk/docs/Web/CSS/CSS_display/Containing_block).
 
 Переважну більшість часу абсолютно позиціоновані елементи, що мають {{Cssxref("height")}} та {{Cssxref("width")}} зі значенням `auto`, мають розмір, відповідний їх вмістові. Втім, не [заміщені](/uk/docs/Web/CSS/Replaced_element), абсолютно позиціоновані елементи можуть бути змушені заповнювати увесь доступний простір по вертикалі шляхом вказання {{Cssxref("top")}} та {{Cssxref("bottom")}} і залишення {{Cssxref("height")}} невказаною (тобто `auto`). Вони можуть аналогічно бути змушені заповнювати ввесь доступний простір по горизонталі шляхом встановлення {{Cssxref("left")}} та {{Cssxref("right")}} і залишення {{Cssxref("width")}} – `auto`.
 
@@ -165,7 +165,8 @@ position: unset;
   рядку є місце. Рядкові елементи з переповненням
   <span>завертають на новий рядок, якщо це можливо, як-от цей, із текстом</span
   >, або просто переходять на новий рядок, якщо це неможливо, як-ось це
-  зображення: <img src="long.jpg" />
+  зображення:
+  <img src="https://webdoky.github.io/shared-assets/images/examples/long.jpg" />
 </p>
 ```
 
@@ -207,7 +208,7 @@ span {
 
 ### Фіксоване позиціонування
 
-Фіксоване позиціонування є подібним до абсолютного позиціонування, за виключенням того, що [контейнерний блок](/uk/docs/Web/CSS/Containing_block) елемента є початковим контейнерним блоком, встановленим _областю перегляду_, якщо жоден предок не має властивості `transform`, `perspective` чи `filter` зі значенням, відмінним від `none` (дивіться [Специфікацію CSS перетворень](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), що змусило б такого предка замінити елементові його [контейнерний блок](/uk/docs/Web/CSS/Containing_block). Це може бути використано для створення "плавучого" елемента, котрий залишається на одній позиції незалежно від прокручування. У прикладі нижче елемент "Один" зафіксований на відстані 80 пікселів від верху сторінки і 10 пікселів від лівого краю. Навіть після прокручування він залишається на тому самому місці відносно області перегляду. Крім того, коли властивість [`will-change`](/uk/docs/Web/CSS/will-change) має значення `transform`, то встановлюється новий контейнерний блок.
+Фіксоване позиціонування є подібним до абсолютного позиціонування, за виключенням того, що [контейнерний блок](/uk/docs/Web/CSS/CSS_display/Containing_block) елемента є початковим контейнерним блоком, встановленим _областю перегляду_, якщо жоден предок не має властивості `transform`, `perspective` чи `filter` зі значенням, відмінним від `none` (дивіться [Специфікацію CSS перетворень](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), що змусило б такого предка замінити елементові його [контейнерний блок](/uk/docs/Web/CSS/CSS_display/Containing_block). Це може бути використано для створення "плавучого" елемента, котрий залишається на одній позиції незалежно від прокручування. У прикладі нижче елемент "Один" зафіксований на відстані 80 пікселів від верху сторінки і 10 пікселів від лівого краю. Навіть після прокручування він залишається на тому самому місці відносно області перегляду. Крім того, коли властивість [`will-change`](/uk/docs/Web/CSS/will-change) має значення `transform`, то встановлюється новий контейнерний блок.
 
 #### HTML