CSS 애니메이션으로 인한 스태킹 문제

Question

빌드하려는 홈페이지의 상단에 검색 영역이 있습니다. 검색 영역은 텍스트 입력 1 개와 드롭 다운 상자 2 개와 제출 또는 "검색"버튼으로 구성됩니다.

나는 animate.css에서 내가 사용하고있는 Wordpress 위젯에 애니메이션의 페이드를 추가하려고했습니다. 그러나 드롭 다운 상자는 아래의 컨테이너 div로 오버랩됩니다.

당신은 애니메이션 버전이 here

및 here들이 정상적으로 드롭 다운 상자가 표시 애니메이션없이 이전 버전에 추가 볼 수 있습니다.

누구나 스태킹 순서 또는 수정 사항에 영향을 미치지 않고 애니메이션을 유지하는 방법을 알고 있습니까?

감사합니다!

관련 소스/스타일링 코드의 일부

는

<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> 

아래와 같습니다

<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> 

CSS :

.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; 
} 

Answer 1

당신은에 Z- 인덱스를 추가해야합니다 검색 영역 컨테이너 div. Z- 인덱스는 위치 지정 요소 (절대, 상대, 고정)에 대해서만 작동합니다. 사이트의 애니메이션 버전을 사용하여 나는 개발 도구를 통해 인라인 스타일을 추가 : 작업에 보였다

style="position:relative; z-index:10"

- 당신의 CSS에서 그것을 밖으로 시도 :해야하는 코드의 도움을 구하고