DateTimePicker 添加css动画后在后台打开（JSFiddle inside）答案

【问题标题】：DateTimePicker opens in Background since added css-animation (JSFiddle inside)DateTimePicker 添加css动画后在后台打开（JSFiddle inside）
【发布时间】：2016-11-16 17:46:22
【问题描述】：

我在使用“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 类“rotateIn”，选择器将正常打开。

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

【问题讨论】：

标签： css twitter-bootstrap-3 css-animations bootstrap-datetimepicker animate.css

【解决方案1】：

您应该给<div class="panel panel-default animated rotateIn"> 的父级分配一个比其兄弟级更高的z-index。

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

【讨论】：