FullCalendar出现在z-index较高的背景后面
问题描述：
我试图让FullCalendar的某些事件出现在我创建的背景前，但我无法改变z-index，但我不知道为什么。FullCalendar出现在z-index较高的背景后面
我已经设法得到背景前的整个日历div，但我似乎无法针对一个事件，并设置Z指数。
我对模态和背景没有那么多的经验 - 我错过了CSS属性吗？
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
right: "prev,next"
},
slotDuration: "00:05:00",
slotLabelInterval: "00:15:00",
contentHeight: "auto",
defaultView: "agendaWeek",
eventDurationEditable: false,
allDaySlot: false,
eventLimit: true,
events: [{
title: "Test Entry",
start: "2017-12-18T01:00:00",
end: "2017-12-18T02:00:00"
}]
});
});@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');
#calendar {
width: 800px;
position: absolute;
}
.fc-event {
z-index: 20;
}
#backdrop {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
background-color: rgb(0, 0, 0);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="backdrop">
</div>
<div id="calendar">
</div>
答
这工作，更新你如何渴望：
$(document).ready(function() {
$("#calendar").fullCalendar({
header: {
right: "prev,next"
},
slotDuration: "00:05:00",
slotLabelInterval: "00:15:00",
contentHeight: "auto",
defaultView: "agendaWeek",
eventDurationEditable: false,
allDaySlot: false,
eventLimit: true,
events: [{
title: "Test Entry",
start: "2017-12-18T01:00:00",
end: "2017-12-18T02:00:00"
}]
});
});@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.print.css');
#backdrop {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
background-color: rgb(0, 0, 0);
}
#calendar {
width: 800px;
position: absolute;
z-index: 1;
}
.fc td,
.fc th {
background-color: rgba(0, 0, 0, .8) !important;
border: 1px solid rgba(0, 0, 0, .8) !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.8.0/fullcalendar.min.js"></script>
<div id="backdrop">
</div>
<div id="calendar">
</div>
你的意思是什么地方？日期？ – 2017-12-18 12:27:22
我检查过你的codepen和日历显然是在背景之前......是什么让你觉得它不是？ – Eric
它不是背后的背景，事情是你的日历背景标签是透明的，所以它会让你认为日期在后面。如果你为日历设置背景，你会看到它的背景。 – 2017-12-18 12:28:58