visibility¶

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

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

Демо¶

Блоки

overflow
overflow-x
overflow-y
visibility

Синтаксис¶

/* 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

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

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

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

<!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>