Перед всплывающим окном:
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;
}