Lowering z-index causes descendant elements to become unclickable

Question

I have a (CSS) stacking question.

The tab-boxes on my development site below have z-index set as -1 so that their border appears behind the tabs above them, so that the active tab's white bottom border covers it. But on all browsers but Opera this makes descendants of the tab-boxes (links, forms, etc.) unclickable. You can see this at:

http://od.philosofiles.com/

Can anyone help? Here's the bare bones of the HTML and CSS, though examining the link above with Firebug would probably be more illuminating:

<ul class="odtabs">
  <li id="tab-Authors1" class="first active"><a href="link">Tab</a></li>
</ul>
<div id="tab_content-Authors1" class="odtab-content">
  <p><a href="link">Tab Box</a></p>
</div>

<style type="text/css">
  <!--
  .odtabs li {
     float: left;
     background-color: #ddd;
     width: 80px;
     height: 19px;
     list-style-type: none;
  }

  .odtabs li.active {
     background-color: white;
     border-bottom-color: white;
  }

  .odtab-content {
      border: 1px solid #babcbd;
      margin-top: -1px;
      clear: both;
      position: relative;
      top: -1px;
      z-index: -1;
  }
  -->
</style>

Answer 1

Set z-index to -100.

.odtab-content {
border:1px solid #BABCBD;
clear:both;
font-size:0.9166em;
margin-top:-1px;
padding:0 1em;
position:relative;
top:-1px;
z-index:-100;
}

Answer 2

I finally fixed this myself, after a lot of experimentation with line-by-line reconstruction. I believe the problem was due to the z-index being negative; however, the only way to make it work with a positive z-index and a higher positive z-index was to set position: relative on the tabs, which required quite a different approach. (Apparently z-index only works on absolute, relative or fixed positioned elements.) Here, for those interested/with similar problems, is the full CSS I used:

ul.odtabs {
  display: inline;
  margin: 0;
  padding: 0;
}

.odtabs li {
  float: left;
  background-color: #ddd;
  border: 1px solid #babcbd;
  width: 80px;
  height: 19px;
  margin-right: 2px;
  text-align: center;
  list-style-type: none;
  position: relative;
  z-index: 2;
}

.odtabs li.active {
  background-color: white;
  border-bottom-color: white;
}

.odtabs a {
  color: #78797c;
  font-size: 0.75em; /* 9px = 12*0.75 */
  font-weight: bold;
  margin-top: 0px;
  padding-top: 0px;
}

.odtabs .last {
  margin-right: 0px;
}

.odtab-content {
  font-size: 0.9166em;
  border: 1px solid #babcbd;
  padding: 0px 1em; /* ie. 12px */
  clear: both;
  position: relative;
  top: -1px;
  z-index: 1;
}