css - 为什么css定义区域被锁了？ (css3/标签式)

Question

我正在玩来自 http://css-tricks.com/examples/CSSTabs/ 的选项卡式 CSS :

例子六

.w3c { min-height: 250px; position: relative; width: 100%; }
.w3c > div { display: inline; }
.w3c > div > a { margin-left: -1px; position: relative; left: 1px; text-decoration: none; color: black; background: white; display: block; float: left; padding: 5px 10px; border: 1px solid #ccc; border-bottom: 1px solid white; }
.w3c > div:not(:target) > a { border-bottom: 0; background: -moz-linear-gradient(top, white, #eee); }   
.w3c > div:target > a { background: white; }    
.w3c > div > div { background: white; z-index: -2; left: 0; top: 30px; bottom: 0; right: 0; padding: 20px; border: 1px solid #ccc; }    
.w3c > div:not(:target) > div { position: absolute }
.w3c > div:target > div { position: absolute; z-index: -1; }

这会创建一个选项卡式区域，但我放在选项卡中的任何内容都不可操作:我无法突出显示，我无法创建链接。我不确定完全是怎么回事，只是选择了这个例子，因为它很简洁。任何 CSS 专家都可以解释为什么我似乎对此无能为力。

注意:它非常适合我的需要，除了我不能在选项卡中放置纯文本以外的任何内容。

Answer 1

将最后一条规则的 z-index 更改为 0，您应该能够再次与选项卡的内容进行交互:

.w3c > div:target > div { position: absolute; z-index: 0; }

具有负的 z-index 意味着具有零或正的 z-index 的任何内容都将与选项卡重叠。其中之一很可能是页面 body，它会导致“禁用”选项卡内容。