Stacking issue caused by CSS animation

Question

I have a search area at the top of a homepage I am trying to build. The search area consists of one text input and two dropdown boxes, as well as a submit or "Search" button.

I have tried to add a fade in animation from animate.css to the Wordpress widget I am using, which worked. However the dropdown boxes are now overlapped by the container div below.

You can see the version with the animation added here

and here is an older version without the animation, where the dropdown boxes appear as they should.

Does anyone know of any way of keeping the animation without affecting the stacking order, or a fix?

Thanks!

Some of the relevant source/styling code is shown below

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

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). Although you have provided a [**link to an example or site**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it), if the link were to become invalid, your question would be of no value to other future SO users with the same problem. — Paulie_D, Oct 05 '16 at 15:54

score 0 · Answer 1 · answered Oct 05 '16 at 16:59

0

You'll need to add a z-index to your search area container div. Keep in mind z-index only works for positioned elements (absolute, relative, fixed). Using the animated version of your site I added an inline style through dev tools:

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

Which seemed to work - try it out in your CSS:

answered Oct 05 '16 at 16:59

khopsickle

74
1
7

I had actually tried that over and over, wondering why it wasn't working and I was styling the wrong div. Thank you so much I was on the verge of pulling my hair out haha. – Josh Thorley Oct 05 '16 at 18:01
Ah, yeah, positions and z-index are really finicky, glad it works now though! – khopsickle Oct 06 '16 at 16:01

Stacking issue caused by CSS animation

1 Answers1