z index - CSS Layering Quirks -

OK, so I have some devices added to the container two internal divs over each 15px overlap; The problem is that I do not like to like them.

  & lt; Div class = "headerbuttons" & gt; & Lt; Div id = "workable button" class = "workable button activation" & gt; Work table & lt; / Div & gt; & Lt; Div id = "extra cotsbuttons" category = "additional cost button inactive" & gt; Additional cost & lt; / Div & gt; & Lt; / Div & gt;  

And CSS looks like this,

  .headerButtons {margin: auto; Text-align: center; } .headerButtons div {text-align: center; Height: 27px; Text Indent: -9999%; Display: inline-block; Cursor: indicator; } #WorkTableButton {width: 195px; } .WorkTableButtonActive {background: URLs (ui_images / WorkTableActiveButton.png) no-repeat; Z-index: 99999; } #additionalCostsButton {width: 192px; Status: Relative; Left: -15px; } .additionalCostsButtonInactive {background: url (ui_images / AdditionalCostsInnactiveButton.png) no-repeat; Z-index: 0; }  

The problem is that, #WorkTableButton DIV still appears behind #additionalCostsButton, even if the WorkTableButtonActive class is applied to that which gives the layer to the div above the others Is ... right?

What am I doing wrong?

z-index property only works on elements that are specially Are deployed.

You need to add a status to your #WorkTableButton , such as:

  #WorkTableButton {width: 195px; Status: Relative; }  

#additionalCostsButton followed by #WorkTableButton .