css - CSS 的 Bootstrap Datepicker 错误(未加载？？)

Question

我正在使用 Bootstrap 日期选择器处理一个元素，但我遇到了一些问题。日期选择器正在显示，但它在模态后面。并且基于对它的观察，CSS 没有正确加载(我试图将 z-index 设置为 100000，我只能告诉样式没有应用。这是我的代码。有什么明显的我只是错过了? 我在下面也附上了一张图片。

文本框代码(Jade编写)

input#pickupdate.form-control.datepicker(type='text', required='true', placeholder='Return Date')

在 CSS 中，我用 .datepicker 来标识它，这应该可以正常工作吧？即 -

.datepicker {
  padding: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  position: relative;
  direction: ltr;

  z-index: 1000000;
}

此外，在 HTML 中我正在运行一个脚本

script(type='text/javascript')
        $(document).ready(function() {
            $('.datepicker').datepicker();
        })

我知道正在加载 css 文件，并且根据错误控制台正确加载 Bootstrap 日期选择器文件。

当前工作方式的链接:http://postimg.org/image/rofg2ft35/ (请注意模式上方的日期，但根据图像的工作方式格式不正确)

它应该如何工作:http://postimg.org/image/i7zjxjyc9/

抱歉，如果这是一个简单的问题，我现在才学习网络开发并且已经坚持了一天多。谢谢!

编辑:添加了 Kiee 建议的修复

Answer 1

尝试添加:position:relative 到 .datepicker z-index 对静态元素没有影响。