Властивості усунення
Три схеми позиціонування, описані в попередньому розділі, – relative, absolute і fixed – використовують чотири різні властивості для опису зміщення сторін елемента, що позиціонується щодо його блока-контейнера. Ці чотири властивості, які ми називатимемо властивостями зміщення (offset properties), роблять більшу частину роботи з позиціонування.
Ці властивості описують зміщення щодо найближчої сторони блоку-контейнера (відповідно до слова зміщення (offset)). Наприклад, властивість top описує, на скільки повинен відстояти верхній край поля елемента, що позиціонується, від верху його блоку-контейнера. Для властивості top позитивні значення переміщують верхній край поля елемента, що позиціонується нижче, а негативні значення переміщують його вище верху його блоку-контейнера. Аналогічно властивість left описує, наскільки далеко вправо (для позитивних значень) або вліво відстоює лівий край поля елемента, що позиціонується щодо лівого краю блоку-контейнера. Позитивні значення будуть зрушувати край поля елемента, що позиціонується вправо, а негативні значення - вліво. Можна поглянути на це інакше: позитивні значення зумовлюють зміщення всередину, пересуваючи краї до центру блоку-контейнера, а негативні - зсуву назовні.
У вихідній специфікації CSS2 сказано, що зміщуються краї вмісту, а не краї поля, але це суперечило іншим частинам CSS2.
Помилка була виправлена в наступному списку помилок та CSS2.1. Обчислення зсувів виконується по краях полів у всіх броузерах, що активно розробляються (на момент написання даної книги). Як результат зміщення країв полів позиціонованого елемента у його позиціонування переміщається все: і поля, і рамки, і відступи, і вміст. Таким чином, дляпозиціонованих елементів можна задавати поля, рамки та відступи; все це буде збережено і залишиться в позиціонованому елементі і буде в області, визначеної властивостями зсуву. Важливо пам'ятати, що властивості зсуву визначають зсув від аналогічної сторони (наприклад, left визначає зсув від лівої сторони) блоку-контейнера, а не від його в-контейнера, задавши такі значення:
top: 50%; bottom: 0; left: 50%; right: 0;
У цьому прикладі зовнішній лівий край позиціонованого елемента розміщується посередині блоку-контейнера. Це його усунення від лівого краю блоку-контейнера. Зовнішній правий край позиціонованого елемента, однак, не зрушений щодо правого краю блоку-контейнера, тому вони збігаються. Аналогічно для верху і низу позиціонованого елемента: верхній зовнішній край знаходиться посередині блок-контейнера, але зовнішній нижній край збігається з нижнім краєм блоку-контейнера.
Більшість прикладів цього розділу стосуються абсолютного позиціонування.
Оскільки абсолютне позиціонування є найпростішою схемою для демонстрації принципу роботи властивостей top, right, bottom, ми дотримуватимемося його. Зверніть увагу, що позиціонований елемент має трохи інший колір тла. На рис. 10.26 у нього немає полів, але якби вони були, то створювали б порожній простір між рамками і краями, що зміщуються. При цьому здавалося б, що елемент, що позиціонує, не заповнює всю нижню праву чверть блоку-контейнера. Правду кажучи, він би заповнював область, але цього не було б видно. Таким чином, наступні два набори стилів мали приблизно однакове уявлення, якщо припустити, що розмір блоку-контейнера дорівнює 100em×100em.
top: 50%; bottom: 0; left: 50%; right: 0; margin: 10em; top: 60%; bottom: 10%;left: 60%; right: 10%; margin: 0;
Знову ж подоба була б тільки здається. Задаючи негативні значення, можна розташувати елемент поза його блока-контейнера. Так, застосування таких значень призведе до результату: top: -5em; bottom: 50%; left: 75%; right: -3em; Крім значень довжини та відсоткових значень, для властивостей усунення також може бути задано значення auto, що встановлюється за умовчанням.
Для auto не визначено якусь конкретну схему поведінки; воно змінюється залежно від вибраного типу позиціонування. Принцип роботи auto ми вивчимо у цьому розділі трохи пізніше у розгляді кожного з типів позиціонування.