如何将弹出窗口置于网格线和文本上方？

Question

Before popup: https://i.imgur.com/qNrsTej.png

After popup: https://i.imgur.com/EWrAY3E.png

The popup div is inside date 3. You can see that the popup covers the grid before it but not those comes after it. Does anyone know how to fix this?

I have tried setting the z-index but it seems not to be the case.

Here's the html and the CSS of my page.

<div class="calendar">
    <span class="day-name" v-for="weekday in weekdayInfo">{{weekday.shorthand}}</span>
    <div class="day" v-for="calendarDay in calendarDays" @click="focusOnDay(calendarDay)">
        {{calendarDay.getDate()}}
        <div class="popup_calendar light" v-if="calendarDay == focusDay">
            <div class="calendar_header">...</div>
            <div class="calendar_events">...</div>
        </div>
    </div>
</div>

.calendar {
    display: grid;
    width: 100%;
    grid-auto-columns: minmax(120px, 1fr);
    grid-template-rows: 50px;
    grid-auto-rows: 120px;
    overflow: auto;
}
.calendar-container {
    width: 90%;
    margin: auto;
    overflow: hidden;
    font-family: Montserrat, "sans-serif";
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    background: #fff;
    max-width: 1200px;
}
.day {
    border-bottom: 1px solid rgba(166, 168, 179, 0.12);
    border-right: 1px solid rgba(166, 168, 179, 0.12);
    text-align: right;
    padding: 14px 20px;
    letter-spacing: 1px;
    font-size: 12px;
    box-sizing: border-box;
    color: #98a0a6;
    position: relative;
    z-index: 1;
}
 .light {
     background-color: #fff;
 }

 .popup_calendar {
     text-align: left;
     width: 500px;
     height: 500pxcss;
     box-shadow: 0px 0px 35px -16px rgba(0, 0, 0, 0.75);
     font-family: 'Roboto', sans-serif;
     padding: 20px;
     color: #363b41;
     background-color: #FFFFFF;
     display: inline-block;
     z-index: 200;
     overflow: visible;
     margin-top: -100px;
     margin-left: -100px;
 }

Answer 1

remove z-index for .day , add position:relative; for .popup_calendar

.popup_calendar {
     text-align: left;
     width: 500px;
     height: 500pxcss;
     box-shadow: 0px 0px 35px -16px rgba(0, 0, 0, 0.75);
     font-family: 'Roboto', sans-serif;
     padding: 20px;
     color: #363b41;
     background-color: #FFFFFF;
     display: inline-block;
     z-index: 200;
     overflow: visible;
     margin-top: -100px;
     margin-left: -100px;
   position:relative;
 }

.day {
    border-bottom: 1px solid rgba(166, 168, 179, 0.12);
    border-right: 1px solid rgba(166, 168, 179, 0.12);
    text-align: right;
    padding: 14px 20px;
    letter-spacing: 1px;
    font-size: 12px;
    box-sizing: border-box;
    color: #98a0a6;
    position: relative;
    /*z-index: 1;*//*Remove this*/
}

https://codepen.io/anon/pen/wZNjVe