Кликабельный элемент в div с тенью: вставка

Question

Я бы хотел, чтобы в элементе div были элементы, на которые можно кликать / фокусировать, у которых есть вставная тень (в этом примере - .calendar): https://jsfiddle.net/axel50397/846ostv5/9/

<div class="calendar">
    <div class="card-deck p-2 w-100">
        <div class="card mx-2">
            <div class="card-header">
                2020-04-01
            </div>
            <div class="card-body">
                <button type="button" class="btn btn-sm btn-primary btn-block">09:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">10:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">11:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">12:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">13:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">14:00</button>
                <button type="button" class="btn btn-sm btn-primary btn-block">15:00</button>
            </div>
        </div>
    </div>
</div>

На основе Мой небольшой опыт CSS кажется невозможным, потому что .calendar должен быть выше его содержимого ... Если это невозможно в CSS, я открыт для предложений, если таковые имеются.

Answer 1

Удалить ниже CSS, вы добавили. Теперь это кликабельные и фокусируемые кнопки.

.calendar .card {
  z-index: -1;
}

https://jsfiddle.net/Lqv4fkjy/