CSS :: Свойство visibility

css-свойство visibility (от англ. visibility – видимость) позволяет делать элемент невидимым, включая его границы и фон. При этом элемент остается в потоке документа, поэтому его место не занимается другими элементами.

Характеристики

Значение по умолчанию: visible.
Применяется: ко всем элементам.
Наследуется: да.
Анимируется: да.
JavaScript: object.style.visibility="value".

Синтаксис

visibility: visible | hidden | collapse

Значения

visible – элемент будет отображен на странице.
hidden – элемент будет скрыт (спрятан), но при этом он не будет удален из потока документа и будет продолжать участвовать в форматировании страницы, при этом вполне можно сказать, что он просто стал полностью прозрачным.
collapse – предназначено для ячеек таблицы, но имеет различные эффекты в браузерах, поэтому лучше его не применять, а использовать значение hidden.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visufx.html#propdef-visibility

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/visibility

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div{
		width: 200px;
		height: 60px;
		padding: 5px;
		margin: 10px;
		border: solid 5px blue;
		}
		
		.vis_1{visibility: visible;}
		.vis_2{visibility: hidden;}
		.vis_3{visibility: visible;}
	
	</style>
	
</head>
<body>

	<div class="vis_1" style="background-color: yellow;">
		visibility: visible; 
	</div>

	<div class="vis_2" style="background-color: violet;">
		visibility: hidden;  
	</div>

	<div class="vis_3" style="background-color: green;">
		visibility: visible; 
	</div>
		
</body>
</html>

Пример №1