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;
}

Answer 2

在经过逐步重建的很多实验后，我终于解决了这个问题。我认为问题是由于z指数为负;然而，使其与正z-index和更高的正z-index一起工作的唯一方法是在标签上设置position：relative，这需要完全不同的方法。（显然z-index仅适用于绝对，相对或固定定位的元素。）这里，对于那些感兴趣/有类似问题的人，我使用的是完整的CSS：

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;
}

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

2 个答案: