爲什麼css定義的區域被鎖定？ （CSS3 /標籤）

Question

我玩標籤的CSS從http://css-tricks.com/examples/CSSTabs/：

例如六個

.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，然後導致「禁用」選項卡內容。