css властивість visibility


Властивість visibility визначає, чи буде елемент приховано. Властивість призначена для відображення або приховування елемента, включаючи рамку навколо нього і фон. Під час приховування елементу, хоча він і стає прихованим, місце, яке він займає, залишається за ним. Якщо передбачається вивід різних елементів в одне і те ж місце екрану, для обходу цієї особливості слід використовувати абсолютне позиціонування або скористатися властивістю display.

Властивість `visibility`

Властивість visibility також приховує рядки і колонки таблиці (<table>). Якщо треба не тільки приховати елемент, але й також повністю прибрати його з потоку - використовуйте властивість display.

Порада:

Навіть невидимі елементи займають місце на сторінці. Використовуй css властивість display для створення невидимих елементів, які не займають простір на макеті сторінки, або використайте абсолютне позиціонування, щоб накласти новий елемент над прихованим!

Нотатка:

Специфікація flexbox передбачає, що visibility: collapse; діє на гнучкий елемент так як і на рядок або колонку таблиці.

Синтаксис

visibility: visible|hidden|collapse|initial|inherit;

Властивість visibility може отримувати 5 значень:

visible

Відображає елемент як видимий.

hidden

Елемент стає невидимим. На відмінно від властивості display:none, продовжує займати місце на макеті сторінки.

collapse

Тільки для таблиць. Робить комірку чи рядок невидимою, при цьому, на відмінно від властивості display:none макет таблиці не змінюється.

Це значення не підтримується браузером Internet Explorer.

Якщо це значення застосовується не до таблиці, то результат його використання буде таким же, як hidden.

initial

Встановлює властивість у значення без задання.

inherit

Вказує на спадковість властивостей від свого батьківського елемента.

Значення без задання: visible
Наслідує: Так
Анімується: Так
JavaScript синтаксис: object.style.visibility="hidden"

Переглядачі

Переглядач
visible, hidden

1.0

4.0

1.0

1.0

4.0

12.0

collapse

1.0

8.0

1.0

4.0

9.5

12.0

Переглядач
collapse

4.0

Не підтримується

1.0

visible, hidden

1.0

1.0

1.0


Мобільних переглядачів ще не додано.

Приклади


Приклад роботи властивості visibility

Простий приклад, який показує як сховати елемент за допомогою властивості visibility.

Демонстрація роботи властивості

Додаткові посилання