CODEWITHSUNDEEP
htmlcssdrop-down-menuz-indextransparency
Dmitri Zaitsev
Dmitri Zaitsev

Reputation: 14046

z-index doesn't put dropdown HTML on top

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!

Upvotes: 1

Views: 1337

Answers (3)

Datsos
Datsos

Reputation: 718

Also remember to set element positions, because z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Upvotes: 0

Vladislav Qulin
Vladislav Qulin

Reputation: 1942

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

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Set z-index to -1 in this css, because your dropdown-menu class is having -z-index of 1000 so you need to set your main content should get behind the autocomplete dropdown.

#row-content {
  position: fixed;
  top: 85px;
  bottom: 0;
  width: 100%;
  z-index: -1;
}

Upvotes: 0

Related Questions