Как наложить блоки в адаптивном сайте?

Question

[Андрей Корехов]

Имеется несколько блоков которые накладываются друг на друга, пример по ссылке на codepen
пример по ссылке на codepen

в мобильной версии при нажатии на блок - label показывается тот блок которому он относится и далее он не скрывается

как сделать выбор блока для десктопной версии? что бы при клике по элементу он менял z-index и отображался поверх до следующего клика?
желательно чистое css html

Answer 1

[Антон Усачев]

Очевидный ответ, использование элементов формы, типа checkbox.
Что-то типа этого.

Comments

[Андрей Корехов]

Я правильно понимаю что в css ~ означает что то вроде
если a:cheked (то) ~ (выбрать селектор) block1?

[Антон Усачев]

input[type="checkbox"]:checked + span {color: red}
означает, что если инпут чекнут, спан, идущий СРАЗУ за ним как сосед, поменяет цвет на красный.

input[type="checkbox"]:checked ~ span {color: red}
означает, что если инпут чекнут, спан, идущий за ним как сосед (сразу, вторым, третьим и т.д.), поменяет цвет на красный.

[Андрей Корехов]

Спасибо =)