z-index doesn't put dropdown HTML on top

Question

I need help getting dropdown menu expanding on top. I put z-index on it, yet for some reason I'd like to understand it blends with the rest. The dropdown expands when one types in "Enter your region" on my site 33hotels.com.

I am sorry to post no code but the main problem is I don't know which part of it is responsible for this effect.

Thanks!

EDIT. Turned out that setting position: absolute instead fixed solved the problem! Also strangely it only was a problem in Chrome and Safari but not Firefox!

Answer 1

Add z-index property to #location-search element. You may just set it to 1.

#location-search {
    position: fixed;
    z-index: 1;
    top: 45px;
    margin: 0 5px;
}

Remember, that z-index only works for a fraternal elements - those, who have the same parent. It means, if you have two non-static positioned elements in same parent you can use z-index to place them inside their parent. But as long as they have different parents - you can only rule with their parents z-indecies.

<div id="Wrapper">
    <div id="Test1">blue</div>
    <div id="Test2">red</div>
</div>

div { position: absolute; }
#Test1 { background: blue; z-index: 10; }
#Test2 { background: red; z-index: 9; }
/* blue is over red, though declared earlier */

But

<div id="Wrapper">
    <div id="InnerWrapper">
        <div id="Test1">blue</div>
    </div>
    <div id="Test2">red</div>
</div>

div { position: absolute; }
#InnerWrapper { z-index: 10; }
#Test1 { background: blue; z-index: 15; }
#Test2 { background: red; z-index: 11; }
/* red is over blue, for blue's wrapper has no z-index or lower */