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>

Codepen：https://codepen.io/anon/pen/YYwrqq

來源

2017-12-18 John

你的意思是什麼地方？日期？ – 2017-12-18 12:27:22

我檢查過你的codepen和日曆顯然是在背景之前......是什麼讓你覺得它不是？ – Eric

它不是背後的背景，事情是你的日曆背景標籤是透明的，所以它會讓你認爲日期在後面。如果你爲日曆設置背景，你會看到它的背景。 – 2017-12-18 12:28:58

這工作，更新你如何渴望：

$(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:35:20

仍然試圖在事件背景前和日曆的其餘部分像我最初嘗試的那樣！ – John

太激動我的歉意 – John

更新@John .. –

FullCalendar出現在z-index較高的背景後面

回答

相關問題