visibility: скрытие с сохранением места
visibility:hidden скрывает отображение элемента, обычно сохраняя занимаемое им место в раскладке.
Назначение
visibility:hidden скрывает отображение элемента, обычно сохраняя занимаемое им место в раскладке.
Как это работает
Это отличается от display:none, который исключает коробку из раскладки. Скрытый элемент обычно не доступен для фокусировки и не представлен в дереве доступности.
Пример
<style>
.item{padding:12px;border:1px solid;margin:8px}.hidden{visibility:hidden}
</style>
<div class="item">Первый</div><div class="item hidden">Второй</div><div class="item">Третий</div>Что должно получиться
Второй блок не виден, но между первым и третьим остаётся его место. Это не механизм защиты содержимого от чтения исходного HTML.
Граница применения и частая ошибка
Не выбирайте visibility:hidden для подписи, которую должен читать экранный диктор. Для визуального скрытия с сохранением доступности требуется другой приём и проверка.
Самостоятельная проверка
Замените visibility:hidden на display:none и сравните положение третьего блока. Затем верните visible: место второго блока должно заполниться без пересчёта его исходной позиции.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.