css - 如何将弹出窗口放在网格线和文本上方？

Question

弹出前: https://i.imgur.com/qNrsTej.png

弹出后: https://i.imgur.com/EWrAY3E.png

弹出的 div 在日期 3 内。 您可以看到弹出窗口覆盖了它之前的网格，但没有覆盖它之后的网格。有谁知道如何解决这个问题？

我试过设置 z-index，但似乎不是这样。

这是我页面的 html 和 CSS。

<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

删除 z-index对于 .day , 添加 position:relative;对于 .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