Блог

Я работаю над проектом с использованием bootstrap datepicker, но у меня возникли некоторые проблемы. Средство выбора даты отображается, но оно находится за модальным. И, глядя на это, 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 загружается, и файлы выбора даты начальной загрузки загружаются правильно на основе консоли ошибок.

Ссылка на то, как она работает в настоящее время: http://postimg.org/image/rofg2ft35 / (Обратите внимание на даты над модальным, но неправильным форматированием в соответствии с тем, как оно должно работать с изображением)

Как это должно работать: http://postimg.org/image/i7zjxjyc9 /

Извините, если это простой вопрос, я только сейчас изучаю веб-разработку и застрял на этом больше дня. Спасибо!

Редактировать: добавлено исправление, предложенное Kiee

Попробуйте добавить: position:relative в .datepicker z-index не влияет на статические элементы.