CODEWITHSUNDEEP
css
user2760338
user2760338

Reputation: 235

Z-index not working all the time on hover menu

When hovering over 'Find a Hotel' in the menu in the middle of the page a hover menu appears using css only, no javascript.

http://dusit.syndacast.com/dusitthani/meetings/

however on the home page the hover menu is below other elements even though the z-index is 99999

http://dusit.syndacast.com/dusitthani/

Both pages are using almost identical templates but I cannot see what the difference would be?

Thank you

Upvotes: 0

Views: 730

Answers (3)

gopalraju
gopalraju

Reputation: 2309

Adding z-index:0 to .relative-item and z-index:1 to .blueBar.brand should fix it.

 .relative-item {
   position: relative;
   z-index: 0;
 }

.blueBar.brand{
  position: relative;
  z-index: 1;
}

Upvotes: 3

Chinmay Chiranjeeb
Chinmay Chiranjeeb

Reputation: 61

Following code will fix the issue.

.cover-photo-div {
  z-index: 1;
}
.blueBar {
  z-index: 2;
  position: relative;
}

Upvotes: 0

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

Just set z-index in the parent element instead.

Add or update your css to this:

/* currently this element has position:relative; set */
.cover-photo-div {
  z-index: 1;
}

.blueBar.brand {
  position: relative;
  z-index: 2;
}

Upvotes: 0

Related Questions