Перейти к содержанию

visibility

Свойство visibility предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон.

При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

Демо

Блоки

Синтаксис

1
2
3
4
5
6
7
8
9
/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

Значения

visible

Отображает элемент как видимый.

hidden

Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.

collapse

Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

Примечание

  • Internet Explorer до версии 7.0 включительно не поддерживает значение collapse.
  • Браузер Safari до версии 4.0 не поддерживает значение collapse.
  • Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Значение по-умолчанию: visible

Применяется ко всем элементам

Спецификации

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>visibility</title>
        <style>
            .button {
                background: #fc0;
                padding: 10px 20px;
                display: inline-block;
            }
            .descr {
                visibility: hidden;
            }
            .button:hover + .descr {
                visibility: visible;
            }
        </style>
    </head>
    <body>
        <div class="button">Кнопка</div>
        <p class="descr">
            Данная эксклюзия является подмножеством
            астрациональных супремативных монотенных федоний
            кадонарного экстрафазория.
        </p>
    </body>
</html>

Комментарии