DateTimePicker 在后台打开，因为添加了 css-动画（里面有 JSFiddle）

Question

我在使用 "bootstrap datetimepicker" (http://eonasdan.github.io/bootstrap-datetimepicker/) 时遇到问题，因为我是通过 "animate.css" 添加动画的。

我创建了以下 JSFiddle：

https://jsfiddle.net/r58gwf2v/

<div class="panel panel-default animated rotateIn">
 <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
    <div class="form-group">
      <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
        </span>
      </div>
    </div>
  </div>
</div>

如您所见，datetimepicker 在后台打开。 如果删除 css-class "rotateIn" 选择器正常打开。

我试图找出 Z 索引的问题所在，但没有取得任何重大成功。

Answer 1

你应该给 <div class="panel panel-default animated rotateIn"> 的父级 z-index 高于它的兄弟级。

您更新后的代码： https://jsfiddle.net/0dkeb0dr/