Bootstrap datetimepicker及jQuery表格层级问题 CSS调整求助

嘿，这个问题我做项目时也踩过坑，核心就是元素的z-index层级冲突，咱们用CSS和组件配置就能搞定，一步步来：

1. 修复Datetimepicker被遮挡的问题 #

eonasdan的datetimepicker弹出层默认带类名bootstrap-datetimepicker-widget，它的默认z-index可能比你页面里的输入框低，所以被挡住了。直接给它加更高的层级就行：

.bootstrap-datetimepicker-widget {
  z-index: 9999 !important; /* 数值只要比遮挡它的输入框z-index高就可以，默认输入框一般是100以内 */
}

要是担心CSS优先级不够，就加上!important；如果你的自定义CSS是在组件样式之后加载的，也可以不用。

另外还有个更稳妥的方法——初始化组件时直接配置z-index，还能顺便解决父元素overflow:hidden导致picker被截断的问题：

$('#你的datetimepickerID').datetimepicker({
  widgetParent: 'body', // 把picker挂载到body下，脱离可能限制它的父容器
  zIndex: 9999 // 直接设置弹出层的层级
});

2. 修复jQuery渲染表格被输入框遮挡的问题 #

动态渲染的表格被遮挡，同样是z-index的问题，但要注意：z-index只对非static定位的元素生效，所以先给表格设置定位，再调高层级：

/* 替换成你实际的表格类名或ID */
.dynamic-rendered-table {
  position: relative; /* 必须设置为relative/absolute/fixed中的一种 */
  z-index: 1000; /* 数值要高于遮挡它的输入框z-index */
}

如果你的输入框自己设置了z-index，记得把表格的z-index设得比它更高就行。

额外注意点 #

• 检查页面里的其他元素（比如固定导航栏、模态框）有没有设置极高的z-index，别让它们又挡住你的picker或表格；
• 如果是父元素的overflow:hidden导致picker被截断，一定要用上面提到的widgetParent: 'body'配置，把picker移到body下就能解决。

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