Как наложить div блок на другой div при нажатии на кнопку?

Question

[TechNOIR]

Имеется вот такой шаблон: https://codepen.io/psyapathy/pen/wENPgX

Справа на боковой панели есть подобие трёх разноцветных кнопок.
Как сделать чтобы при нажатии допустим на первую справа вылезал аналогичный sidemenu блок поверх имеющегося?

Допустим с одной кнопкой, чтобы при нажатии её он закрывался.
Как наложить div блок на другой div при нажатии на кнопку?

Answer 1

[Роман Филиппов]

Можно через input'ы попробовать реализовать:

<div class="hide-box">
<label><input type="checkbox">
<h6>Кликните</h6></label>
<div class="hide-content">
Тут спрятан блок
</div>
</div>

.hide-box .hide-content {
    display: none;
}
.hide-box input:checked ~ .hide-content {
    display: block;
}
.hide-box input {
    display: none;
}
.hide-box h6 {
    cursor: pointer;
}

Comments

[BrTiam]

Роман Филиппов, неплохо!

Answer 2

[Максим Тимофеев]

Слушать событие клика по кнопке: https://learn.javascript.ru/introduction-browser-events
Накладывать div поверх другого используя абсолютное позиционирование и z-index

Comments

[TechNOIR]

Максим Тимофеев Спасибо за отклик
Клик знаю как делать, но вот z-index не получается сделать. Там всё через flex сделано, не пойму как z-index приделать правильно..