html - 降低 z-index 会导致后代元素变得不可点击

Question

我有一个 (CSS) 堆叠问题。

下面我的开发站点上的选项卡框将 z-index 设置为 -1，以便它们的边框出现在它们上方的选项卡后面，以便事件选项卡的白色底部边框覆盖它。但是在除 Opera 之外的所有浏览器上，这使得选项卡框(链接、表单等)的后代不可点击。您可以在以下位置看到:

http://od.philosofiles.com/

有人可以帮忙吗？下面是 HTML 和 CSS 的基本框架，不过用 Firebug 检查上面的链接可能会更有启发性:

<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

将 z-index 设置为 -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;
}