The idea of using CSS, and specifically the :target selector, to achieve a tabbed interface, was inspired by a W3C example.

However, the z-index-based implementation seemed a bit unwieldy to me. I couldn't help feeling that it ought to be possible to use display somehow, instead of z-index. I decided to investigate further.

With absolute positioning, it is indeed possible. How nice can we make it look, though, and how interoperable will it be with various browsers? This seems like it should warrant further investigation.

Small content.

One thing I had trouble figuring out was how to get the first tab's contents to display by default, before any of the tabs have been clicked. My testing seems to show that the :target selector does not apply to anything when the entire page is the target. (I could of course use :first-child to make the first tab's contents always display, but then it sticks out from behind if one of the other tabs has smaller content.)

How does the example that inspired my investigation handle this issue? Oh, I see, it uses bottom: and right: and sets overflow: to auto. Yeah, okay, that mostly works, except of course then you have to style your tabset with a min-height to prevent ridiculousness.