6. Вирізання області (властивість clip)

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

Властивість clip, застосовується тільки до елементів, що позиціонуються, з властивістю position:absolute. Область вирізки являє собою прямокутник, що прив'язаний до лівого верхнього кута абсолютно позиціонованого елемента. Для визначення вирізки використовується наступний запис значень властивості clip:

clip:rect (top right bottom left)

Аргументи top, right, bottom і left задають координати прямокутника вирізки. Причому допускаються негативні значення аргументів top і left.

Розглянемо наступні випадки:

• якщо сполучити ліві верхні кути елемента й області вирізки (top=0, left=0), а координати правої й нижньої границь вирізки (right і bottom) покласти рівними ширині й висоті позиціонованого елемента (width і height), то на екрані буде відображатися весь елемент, тобто фактично вирізка буде відсутня;

• якщо координати top і left виходять за межі позиціонованого елемента, тобто значення top області вирізки більше суми координат top і height елемента й (або) значення left вирізки перевищує суму left і righ елемента. У цьому випадку вирізка не буде перекриватися з видимою областю позиціонованого елемента і область вирізки буде порожня;

• якщо встановити для будь-якої координати області вирізки значення auto, то вона збіжиться з координатою позиціонованого елемента. Наприклад, відсутності вирізки відповідає значення властивості clip:rect (0 auto auto 0) .

Обробка змісту за межою видимої області елемента (властивість overflow)

Властивість overflow - обробка змісту за межами видимої області елемента, визначає, як буде відображатися зміст, що виходить за межі видимої області. Приймає одне із чотирьох значень:

• visible - відображає весь зміст елемента, навіть за межами встановленої ширини (width) і висоти (height);

• hidden - відображає зміст тільки всередині встановленої видимої області; частина елемента, що виходить за межі області, не показується;

• scroll - додає до відображуваного елемента смуги прокручування незалежно від того, чи міститься зміст елемента у відведеній йому область чи ні;

• auto - додає смуги прокручування тільки за необхідністю;

Таким чином, установлюючи значення visible, ми як би забираємо границі елемента, у той час як значення hidden аналогічно введенню властивості clip: гесt (0 х y 0), у якому х та y відповідають ширині й висоті елемента.

Завдання розташування шарів (властивість z-index)

Якщо позиціоновані елементи перекриваються, необхідно враховувати порядок шарів, у яких вони розташовані. За замовчуванням шари розташовуються один під іншим у тому порядку, у якому відповідні елементи слідують у коді HTML. Однак іноді потрібно порушити порядок розташування шарів, прийнятий за замовчуванням. Для цього застосовується властивість z-index.

Властивість z-index приймає цілі значення (включаючи негативні). Чим більше значення індексу, тим вище розташований елемент. Індекс 0 привласнюється елементу, що містить інші вкладені елементи. Інші елементи, позиціоновані під ним, мають негативні значення z-index. Ті елементи, для яких не задана властивість z-index, розміщаються відповідно їхньому положенню в коді сторінки.

Вивід елемента на екран (властивість visibility)

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

Для зміни установок видимості, прийнятих за замовчуванням, і керування відображенням елементів на екрані призначена властивість visibility. Ця властивість може приймати наступні значення:

• visible - виводить на екран елемент;

• inherit - успадковує властивість visibility батьківського елемента, тобто при цьому значенні видимість даного елемента визначається видимістю елемента, у якому він перебуває;

• hidden - елемент на екран не виводиться.

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

Властивість visibility часто використовується для керування видимістю елемента в динамічному HTML.