Question

I’m playing with tabbed css from http://css-tricks.com/examples/CSSTabs/:

Example six

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

This creates a tabbed area, but nothing I put inside a tab is manipulable: I can’t highlight, I can’t create a link. I’m not sure what is going entirely, just picked this example because it is concise. Can any css expert explain why I can’t seem to do anything with this.

Note: it works perfectly for my needs, except I can’t put anything in the tabs except plain text.

Answer 1

Change the z-index of the last rule to 0 and you should be able to interact with the tab’s contents again:

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

Having a negative z-index means anything with a zero or positive z-index will overlap the tab. One of those things may very well be the page body, which then results in “disabling” the tab content.