CODEWITHSUNDEEP
htmlcssz-index
Shimmy Weitzhandler
Shimmy Weitzhandler

Reputation: 104771

CSS z-index doesn't respond properly - submenu hidden underneath content

I created a header ribbon menu (horizontal menu on top of page), that when hovering on its links, a sub-menu opens for each of them, that should display on top of the main content.

The problem is the sub-menu gets rendered underneath the main-content.

I tried setting a higher value for the sub-menu z-index, but that didn't help.

When I set the main content's z-index to -1 (0 doesn't work either), the sub-menu shows up, but then all the buttons in the content doesn't work.

I search my entire CSS and there is not even one z-index assignment.

Update

The content div is styled:

#content {
  background: #fff;
  position: absolute;
  top: 176px;
  bottom: 25px;
  padding: 20px 0px 63px;
  overflow: hidden;
}

Upvotes: 2

Views: 2903

Answers (3)

Nick Tomlin
Nick Tomlin

Reputation: 29251

If both your menu and #content blocks are absolutely positioned, you will need to set a positive z-index value on both of them to allow overlap (with your menu having a higher z-index than your content).

CSS:

#content {
  background: #fff;
  position: absolute;
  z-index: 1;
  top: 176px;
  bottom: 25px;
  padding: 20px 0px 63px;
  overflow: hidden;
}

#menu {
  z-index:10;
}

Upvotes: 3

TDsouza
TDsouza

Reputation: 938

What position have you set to the hover element to?? z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

The issue may be in your HTML rather than your css, for e.g if you've forgotten to close an element, it may overlap others elements.

either way it would be great help if you added some code to your question.

Upvotes: 0

Talha Akbar
Talha Akbar

Reputation: 10040

Possible Errors:

  1. Your Menu Container Div may have negative z-index.

  2. Your Body or Wrapper may have a very large value of z-index.

Solution:

  1. Remove All z-index and just copy the code of menu and paste at the end of body tag or wrapper div tag. You can also add z-index:99; to submenus.

  2. Remove z-index from Body or Wrapper and add z-index to menu.

Upvotes: -1

Related Questions