CSS动画导致的堆叠问题

我有一个搜索区域在我试图建立的主页顶部。搜索区域包括一个文本输入和两个下拉框，以及一个提交或“搜索”按钮

我尝试将animate.css中的淡入动画添加到我正在使用的Wordpress小部件中，效果很好。但是，下拉框现在与下面的container div重叠

您可以看到添加了动画的版本

并且是一个没有动画的较旧版本，在该版本中，下拉框按应有的方式显示

有人知道在不影响堆叠顺序或修复的情况下保留动画的任何方法吗

谢谢

下面显示了一些相关的源代码/样式代码

<form class="job_search_form" action="http://dev-pantri.pantheonsite.io/profiles/" method="GET">

<div class="search_jobs">

    <div class="search_keywords">
        <label for="search_keywords">Keywords</label>
        <input type="text" name="search_keywords" id="search_keywords" placeholder="What are you looking for?" />
    </div>

    <div class="search_location">
        <label for="search_location">Location</label>
        <input type="text" name="search_location" id="search_location" placeholder="Location" />
    </div>


    <div class="search_categories">
        <label for="search_categories">Category</label>
        <select name='search_categories[]' id='search_categories' class='job-manager-category-dropdown '  data-placeholder='Choose a category&hellip;' data-no_results_text='No results match' data-multiple_text='Select Some Options'>
 <option value="">All categories</option>   
 <option class="level-0" value="44">Arts and Entertainment</option>
 <option class="level-1" value="53">Nightclubs</option>
 <option class="level-0" value="59">Bars</option>
 <option class="level-0" value="61">Lodging</option>
 <option class="level-1" value="62">Hotels</option>
 <option class="level-0" value="63">Nightlife</option>
 <option class="level-0" value="58">Outdoors</option>
 <option class="level-0" value="54">Restaurants</option>
</select>
    </div>


    <div class="filter_wide filter_by_tag">Filter by tag: <span class="filter_by_tag_cloud"></span></div><select  name='search_region' id='search_region' class='search_region' >
<option value='0'>All Regions</option>
<option class="level-0" value="55">Annex</option>
<option class="level-0" value="56">Beaconsfield Village</option>
<option class="level-0" value="57">Bloordale Village</option>
<option class="level-0" value="40">Casa Loma</option>
<option class="level-0" value="39">Corktown</option>
<option class="level-0" value="22">Downtown Core</option>
<option class="level-0" value="23">Dufferin Grove</option>
<option class="level-0" value="24">Entertainment District</option>
<option class="level-0" value="25">Fashion District</option>
<option class="level-0" value="21">Harbourfront</option>
<option class="level-0" value="20">Little Italy</option>
<option class="level-0" value="16">Parkdale</option>
<option class="level-0" value="15">Trinity Bellwoods</option>

---

您需要将z索引添加到搜索区域容器div。请记住，z索引仅适用于定位元素（绝对、相对、固定）。使用站点的动画版本，我通过开发工具添加了一个内联样式：

style=“位置：相对；z索引：10”

这似乎是可行的-在CSS中尝试一下：

---

寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是以最短的格式。虽然你提供了一个链接，但是如果链接无效，你的问题对其他将来有同样问题的用户来说将毫无价值。我实际上已经反复尝试过了，不知道为什么它不起作用，我设计了错误的div。非常感谢你，我差点就要发疯了。哈哈，是的，仓位和z指数真的很挑剔，但很高兴它现在能起作用！

<p class="filter-by-type-label">Filter by type:</p><input type="hidden" id="search_context" name="search_context" value="22" /> <ul class="job_types">
                <li><label for="job_type_freelance" class="freelance"><input type="checkbox" name="filter_job_type[]" value="freelance"  id="job_type_freelance" /> Freelance</label></li>
                <li><label for="job_type_full-time" class="full-time"><input type="checkbox" name="filter_job_type[]" value="full-time"  id="job_type_full-time" /> Full Time</label></li>
                <li><label for="job_type_internship" class="internship"><input type="checkbox" name="filter_job_type[]" value="internship"  id="job_type_internship" /> Internship</label></li>
                <li><label for="job_type_part-time" class="part-time"><input type="checkbox" name="filter_job_type[]" value="part-time"  id="job_type_part-time" /> Part Time</label></li>
                <li><label for="job_type_temporary" class="temporary"><input type="checkbox" name="filter_job_type[]" value="temporary"  id="job_type_temporary" /> Temporary</label></li>
        </ul>
<input type="hidden" name="filter_job_type[]" value="" />
<button type="submit" data-refresh="Loading..." data-label="Search" name="update_results" class="update_results">Search</button><div class="showing_jobs"></div></form>

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}