title: Animate.CSS element is behind other elements
body: <p>I created a Bootstrap live-search picker that is added by jQuery and animated by Animate.CSS after clicking on the green plus button. Without animate CSS, the Picker behaves like a charm. Unfortunately, using animation classes of Anmiate.CSS, the picker is always below all the other content (see Screenshot).<a href="https://i.stack.imgur.com/DnyYh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DnyYh.png" alt="enter image description here"></a></p>
  
  <p>The selectpicker is added by the following code. In the variable "select" are the option values, that are inserted in the picker. Finally, the select picker is initialized. </p>
  
  <pre><code> $('#addPosition').click(function() {
   ...
   $('#articlelist').append("&lt;div style='margin-top: 5px;' class='animated rollIn buffer'&gt;"+
     "&lt;div class='row'&gt;"+
        "&lt;div class='col-sm-1'&gt;&lt;button type='button' class='btn btn-danger btn-sm removePositionArticles'&gt;&lt;span class='fa fa-minus'&gt;&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;"+
           "&lt;div class='col-sm-8'&gt;"+
               select+
           "&lt;/div&gt;"+
        "&lt;div class='col-sm-3'&gt;&lt;input type='number' class='form-control' name='addamount[]' value=''&gt;&lt;/input&gt;&lt;/div&gt;"+
     "&lt;/div&gt;");
  
  //Initialize Selectpicker
  $('.selectpicker').last().selectpicker();
  }
  </code></pre>
  
  <p>The resulting HTML Code looks like the following:</p>
  
  <pre><code>&lt;div style="margin-top: 5px;" class="animated rollIn buffer"&gt;
    &lt;div class="row"&gt;&lt;div class="col-sm-1"&gt;
      &lt;button type="button" class="btn btn-danger btn-sm removePositionArticles"&gt;
        &lt;span class="fa fa-minus"&gt;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-8"&gt;
      &lt;div class="btn-group bootstrap-select form-control open"&gt;
        &lt;button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" title="Niska Teppich" aria-expanded="true"&gt;
          &lt;span class="filter-option pull-left"&gt;Niska Teppich&lt;/span&gt;&amp;nbsp;
          &lt;span class="bs-caret"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;div class="dropdown-menu open" style="max-height: 585.458px; overflow: hidden; min-height: 123px;"&gt;
          &lt;div class="bs-searchbox"&gt;
            &lt;input type="text" class="form-control" autocomplete="off"&gt;
          &lt;/div&gt;
          &lt;ul class="dropdown-menu inner" role="menu" style="max-height: 536.458px; overflow-y: auto; min-height: 74px;"&gt;
            &lt;li data-original-index="0" class="selected active"&gt;
              &lt;a tabindex="0" class="" style="" data-tokens="null"&gt;
                &lt;span class="text"&gt;Niska Teppich&lt;/span&gt;
                &lt;span class="glyphicon glyphicon-ok check-mark"&gt;&lt;/span&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            //Further Options
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;select class="form-control selectpicker" name="addarticleid[]" data-live-search="true" tabindex="-98"&gt;
          &lt;option value="1"&gt;Niska Teppich&lt;/option&gt;
          //Further Options
        &lt;/select&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-sm-3"&gt;&lt;input type="number" class="form-control" name="addamount[]" value=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The additional elements that are added look the same. The Button is a "regular" Bootstrap Button with Bootstrap Classes. I tried playing with z-Index to remove this problem, but however it is not working. </p>
  
  <p>Can you help me? Of course, I can just avoid using animate.css, but this is not my final intention :-/</p>