Bootstrap-datetimepicker弹窗被手风琴遮挡，如何设置使其正常显示？

修复方法 #

问题根因 #

Bootstrap 手风琴组件的.collapse元素默认设置了overflow: hidden，同时代码中手风琴内部多层容器手动设置了position: relative与自定义z-index，形成了独立的堆叠上下文。而tempusdominus-bootstrap-4日期插件默认会把选择弹窗插入到输入框的相邻父容器内，导致弹窗超出.card-body的部分被裁剪，且z-index无法突破父容器的堆叠层级限制，最终出现被遮挡的问题。

最优修复方案 #

修改日期选择器的初始化配置，新增container: 'body'参数，让弹窗直接挂载到页面根节点<body>下，完全不受手风琴内部容器的样式限制，不需要调整原有页面的定位、overflow属性，不会影响其他组件的正常表现。

修改后的初始化代码如下：

$(document).ready(function() {
  $(".datetimepicker").datetimepicker({
    format: "DD.MM.YYYY",
    locale: "tr",
    container: 'body' // 新增该配置项即可
  });
});

备选修复方案 #

如果不想修改JS初始化逻辑，也可以通过CSS覆盖手风琴容器的默认overflow属性实现，该方案可能会轻微影响手风琴折叠动画的过渡效果，仅作为备选：

.accordion .collapse,
.accordion .card-body {
  overflow: visible !important;
}

内容的提问来源于stack exchange，提问作者Muhammed Hanifi Dikmen