如何解决日历事件元素上追加的div被遮挡、z-index无效问题

兄弟，我太懂这种z-index不生效的抓狂感了！你现在踩的坑是FullCalendar的DOM结构层级问题，不是z-index数值设得不够大。

问题根源 #

你把按钮追加到了.fc-bg这个元素里，但fc-bg是FullCalendar里事件的背景容器，它在DOM堆叠上下文里的层级本来就比事件的内容层（比如.fc-content）低。就算你给子元素设再高的z-index，也突破不了父元素的层级限制——就像你站在地下室，就算踮脚也没法比楼上的人高一样。

直接有效的解决方案 #

别往.fc-bg里塞元素了，直接追加到事件的主容器element或者事件内容区.fc-content里，这俩的层级足够高，能让你的按钮显示在事件最上层：

方案1：追加到事件主容器element

把代码改成这样：

element.append('<br><div style="text-align: center; position: relative; z-index: 15;">' + 
  '<button mat-button style="width: 80%; position: relative; z-index: 16; color: black; background-color: lightskyblue; font-weight: bold;" id="' + member._id + '" class="你的类名"></button>' +
'</div>');

这里特意加了position: relative，因为z-index只对定位元素（relative/absolute/fixed/sticky）生效，之前你可能漏了这个关键属性！

方案2：精准追加到事件内容区

如果不想影响事件整体布局，也可以找事件的内容容器.fc-content来追加：

element.find('.fc-content').append('<div style="text-align: center; position: relative; z-index: 15;">' + 
  '<button mat-button style="width: 80%; position: relative; z-index: 16; color: black; background-color: lightskyblue; font-weight: bold;" id="' + member._id + '" class="你的类名"></button>' +
'</div>');

不推荐的应急方案（实在想改背景层的话） #

如果你非要把元素放在背景层上方，可以强制提升.fc-bg的z-index，但这样可能会影响日历其他元素的布局，谨慎使用：

const bgElement = element.find('.fc-bg');
bgElement.css('z-index', 10); // 把背景层层级提上去
bgElement.append('<br><div style="text-align: center; position: relative; z-index: 15;">' + 
  '<button mat-button style="width: 80%; color: black; background-color: lightskyblue; font-weight: bold;" id="' + member._id + '" class="你的类名"></button>' +
'</div>');

最后检查点 #

确认你的按钮和外层div都设置了position属性，没有这个的话，z-index就是摆设！

内容的提问来源于stack exchange，提问作者Adam007