How to put the popup above the gridline and text?

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