Записки HTML-верстальщика: способ скрыть элемент на CSS, о котором многие не знают

И снова здрасте всем! 

В этой статье я хочу поделиться одним из редко применяемых хаков в верстке, который в некоторых моментах может быть очень полезным для того, чтобы скрыть какой-то элемент html-структуры, не удаляя его из html кода физически. 

Проблема: Нам необходимо скрыть, какой-либо элемент со страницы, не удаляя его физически из кода, и не используя стандартные display:none, visibility:hidden, width/height, left/right итд.

Вот так выглядит наша заготовочка для этой задачи:

Решение: поможет решить эту проблему свойство z-index. Не в каждой спецификации вы сможете найти описание того, что это свойство может принимать не только нулевые и положительные значения, но и значение "-1". Именно это значение позволяет нам спрятать элемент под родительский объект с каким-либо фоном. В нашем случае достаточно дописать к блоку с зеленым квадратом z-index:-1 и наша проблема будет решена!

Таким образом, данный подход может иногда сыграть важную роль в разработке Вашего сайта. В моей практике я использовал это свойство при работе с фреймами и некоторыми JS-функциями, связанными с анимацией элементов. 

Ах да, свойство это кроссбраузерное (Проверено в Chrome, Firefox, Opera, IE Edge, IE 8+).

Спасибо за внимание :)   

Буду раз ответить всем на Ваши вопросы, буду рад видеть всех и каждого у себя в подписчиках, буду рад увидеть Ваше решение этой проблемы, буду признателен за Ваши лайки и отзывы.