Webmaster Forum / HTML, CSS, Scripts / CSS / September 2005

A small part of the link is clickable in Opera or Firefox, if you add

<div style="float: right"><a href="http://example.com/">example
link</a></div>

<h1 style="position: relative; border: 1px solid green;">A title</h1>

and then move your mouse on top of the link but a pixel or so above the
border of the h1 element then you can get at that part of the link that
is clickable. But most of the link indeed sits below the h1 and just
shines through its transparent background. As for the stacking, yes,
floated elements and positioned elements sit on a different stacking
level, see <http://www.w3.org/TR/CSS21/visuren.html#q29> which says:

Each stacking context consists of the following stacking levels (from
back to front):

   1. the background and borders of the element forming the stacking
context.
   2. the stacking contexts of descendants with negative stack levels.
   3. a stacking level containing in-flow non-inline-level descendants.
   4. a stacking level for floats and their contents.
   5. a stacking level for in-flow inline-level descendants.
   6. a stacking level for positioned descendants with 'z-index: auto',
and any descendant stacking contexts with 'z-index: 0'.
   7. the stacking contexts of descendants with positive stack levels.

So due to the position: relative the h1 sits on top most of that floated
div with the link.