Свойство CSS visibility предназначено для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента с помощью свойства visibility элемент становится, не виден, однако место, которое он занимает, остается за ним.
Возможные значения свойства visibility:
· inherit - Элемент отображается так как указанно в элементе родителе.
· visible - Отображает элемент. (по умолчанию).
· hidden - Скрывает элемент. В отличии от display: none оставляет за элементом площадь которую он занимает. Проще говоря если display: none "удаляет" элемент то hidden делает его "прозрачным".
· collapse - Скрывает колонки и строки таблицы идентично display: none, Если свойство применяется к другим элементам, не имеющим отношения к таблицам, то результат будет таким же, как hidden.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>visibility</title> </head> <body> <p>Блок 2 скрыт, однако место, которое он занимает, зарезервировано за ним.</p> <div> <span style="background: #c5ffa0; padding: 5px;">блок 1</span> <span style="visibility: hidden; background: #c0e4ff; padding: 5px;">блок 2</span> <span style="background: #c5ffa0; padding: 5px;">блок 3</span> </div> <hr> <p>Строка 2 скрыта "удалена", если только дело происходит не в Internet Explorer</p> <table border="1"> <tr> <td>Строка 1</td> </tr> <tr style="visibility: collapse;"> <td>Строка 2</td> </tr> <tr> <td>Строка 3</td> </tr> </table> </body> </html>
Обратите внимание visibility: collapse; не поддерживается браузером Internet Explorer.