Skip to content

Commit

Permalink
update(CSS): web/css/position/index.md
Browse files Browse the repository at this point in the history
  • Loading branch information
undead404 authored and AdriandeCita committed Jun 12, 2022
1 parent 890f84b commit 100236d
Showing 1 changed file with 10 additions and 9 deletions.
19 changes: 10 additions & 9 deletions files/uk/web/css/position/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ browser-compat: css.properties.position

{{CSSRef}}

Властивість [CSS](/uk/docs/Web/CSS) **`position`** вказує на те, як елемент розміщується в документі. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} визначають остаточне місцеположення розміщених елементів.
Властивість [CSS](/uk/docs/Web/CSS) **`position`** (положення) вказує на те, як елемент розміщується в документі. Властивості {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}} та {{Cssxref("left")}} визначають остаточне місцеположення розміщених елементів.

{{EmbedInteractiveExample("pages/css/position.html")}}

Expand All @@ -29,6 +29,7 @@ position: sticky;
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;
```

Expand All @@ -50,15 +51,15 @@ position: unset;

- `fixed` (фіксоване)

- : Елемент зникає зі звичайного плину документа, і для нього не виділяється жодного простору у макеті сторінки. Він позиціонується відносно до початкового [контейнерного блока](/uk/docs/Web/CSS/Containing_block), утвореного від {{glossary("viewport")}}, крім випадків, коли один з предків елемента має властивість `transform`, `perspective` або `filter`, значення котрої відмінне від `none` (дивіться також [Специфікацію трансформацій CSS](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), – у таких випадках предок з однією з вищезгаданих властивостей поводиться як контейнерний блок. (Зверніть увагу: існує неузгодженість браузерів щодо впливу властивостей `perspective` та `filter` на формування контейнерного блоку.) Остаточна позиція елемента визначена значеннями властивостей `top`, `right`, `bottom` та `left`.
- : Елемент зникає зі звичайного плину документа, і для нього не виділяється жодного простору у макеті сторінки. Він позиціонується відносно до початкового [контейнерного блока](/uk/docs/Web/CSS/Containing_block), встановленого {{glossary("viewport", "областю перегляду")}}, крім випадків, коли один з предків елемента має властивість `transform`, `perspective` або `filter`, значення котрої відмінне від `none` (дивіться також [Специфікацію трансформацій CSS (англ.)](https://www.w3.org/TR/css-transforms-1/#propdef-transform)), – у таких випадках предок з однією з вищезгаданих властивостей поводиться як контейнерний блок. (Зверніть увагу: існує неузгодженість браузерів щодо впливу властивостей `perspective` та `filter` на формування контейнерного блоку.) Остаточна позиція елемента визначена значеннями властивостей `top`, `right`, `bottom` та `left`.

Це значення завжди створює новий [контекст нагромадження](/uk/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). При друкові документа такий елемент друкується на одній позиції на _кожній сторінці_.

- `sticky` (липкий)

- : Елемент позиціонується згідно зі звичайним плином документа, і далі зміщується відносно до свого _найближчого предка з прокручуванням_ та [контейнерного блока](/uk/docs/Web/CSS/Containing_block) (найближчого предка блокового рівня), включно з елементами таблиць, на основі значень властивостей `top`, `right`, `bottom` та `left`. Відступ не впливає на позицію інших елементів.
- : Елемент позиціонується згідно зі звичайним плином документа, а далі зміщується відносно до свого _найближчого предка з прокручуванням_ та [контейнерного блока](/uk/docs/Web/CSS/Containing_block) (найближчого предка блокового рівня), включно з елементами таблиць, на основі значень властивостей `top`, `right`, `bottom` та `left`. Відступ не впливає на позицію інших елементів.

Це значення завжди створює новий [контекст нагромадження](/uk/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). Зверніть увагу, що липкий елемент "прилипає" до свого найближчого предка, який має "механізм прокручування" (утворений встановленням властивості `overflow` у значення `hidden`, `scroll`, `auto` чи `overlay`), навіть коли такий предок не є найближчим справді прокручуваним предком. Це практично перешкоджає будь-якій "липкій" поведінці (дивіться [GitHub-проблему W3C CSSWG](https://github.com/w3c/csswg-drafts/issues/865)).
Це значення завжди створює новий [контекст нагромадження](/uk/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). Зверніть увагу, що липкий елемент "прилипає" до свого найближчого предка, який має "механізм прокручування" (утворений встановленням властивості `overflow` у значення `hidden`, `scroll`, `auto` чи `overlay`), навіть коли такий предок не є найближчим справді прокручуваним предком.

## Опис

Expand All @@ -78,14 +79,14 @@ position: unset;

## Занепокоєння щодо доступності

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

- [MDN – Розуміння WCAG, пояснення Директиви 1.4](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
- [Візуальна презентація: розуміння SC 1.4.8 | Розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
- [Візуальна презентація: розуміння SC 1.4.8 | Розуміння WCAG 2.0 (англ.)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

### Швидкодія та доступність

Прокручування елементів, що мають вміст, позиційований як `fixed` чи `sticky`, може призводити до проблем зі швидкодією та доступністю. Поки користувач прокручує, браузер мусить перемальовувати липкий чи фіксований вміст у новому місці. Залежно від вмісту, що треба перемальовувати, швидкодії браузера та швидкості роботи пристрою, браузер може не мати змоги підтримувати рівень перемальовування 60 кадрів на секунду, що веде до занепокоєння відносно людей з особливими потребами та до провисань для геть усіх. Одне з рішень – додати {{cssxref("will-change", "will-change: transform")}} до позиціонованих елементів, аби відмальовувати елемент у власному шарі, підвищивши швидкість перемальовування та, таким чином, покращити швидкодію та доступність.
Прокручування елементів, що мають вміст, позиційований як `fixed` чи `sticky`, може призводити до проблем зі швидкодією та доступністю. Поки користувач прокручує, браузер мусить перемальовувати липкий чи фіксований вміст у новому місці. Залежно від вмісту, що треба перемальовувати, швидкодії браузера та швидкості роботи пристрою браузер може не мати змоги підтримувати рівень перемальовування 60 кадрів на секунду, що веде до занепокоєння відносно людей з особливими потребами та провисань для геть усіх. Одне з рішень – додати {{cssxref("will-change", "will-change: transform")}} до позиціонованих елементів, аби відмальовувати елемент у власному шарі, підвищивши швидкість перемальовування та, таким чином, покращити швидкодію та доступність.

## Формальне визначення

Expand Down Expand Up @@ -137,7 +138,7 @@ position: unset;

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

Елементи, що є відносно позиціонованими, залишаються у звичайному плині документа. На відміну від них, абсолютно позиціонований елемент виймається із плину; таким чином, інші елементи розміщуються так, ніби його не існує. Абсолютно позиціонований елемент позиціонується відносно до свого _найближчого позиціонованого предка_ (наприклад, найближчого предка, що не є `static`). Якщо позиціонований предок не існує, елемент позиціонується відносно ПКБ (початкового контейнерного блока – дивіться також [визначення W3C](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)), котрий є контейнерним блоком кореневого елемента документа.
Елементи, що є відносно позиціонованими, залишаються у звичайному плині документа. На відміну від них, абсолютно позиціонований елемент виймається із плину; таким чином, інші елементи розміщуються так, ніби його не існує. Абсолютно позиціонований елемент позиціонується відносно до свого _найближчого позиціонованого предка_ (наприклад, найближчого предка, що не є `static`). Якщо позиціонований предок не існує, елемент позиціонується відносно ПКБ (початкового контейнерного блока – дивіться також [визначення W3C (англ.)](https://www.w3.org/TR/CSS2/visudet.html#containing-block-details)), котрий є контейнерним блоком кореневого елемента документа.

#### HTML

Expand Down Expand Up @@ -208,7 +209,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 пікселів від лівого краю.
Фіксоване позиціонування є подібним до абсолютного позиціонування, за виключенням того, що [контейнерний блок](/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 пікселів від лівого краю.

#### HTML

Expand Down

0 comments on commit 100236d

Please sign in to comment.