Martin Geisler wrote:
I'm unsure if this is the intended behavaiour or a bug in Firefox, but
if I do
<div style="float: right"><a href="#">A link</a></div>
<h1 style="position: relative">A title</h1>
I cannot click on the link --- it is covered by the title. Without
the `position: relative' it works as expected.
I thought that with `position: relative' the h1 element would be laid
out as usual and then shifted as specified by top, left, etc. Firefox
seems to do something more: change the stacking order.
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.
--
Martin Honnen
http://JavaScript.FAQTs.com/ 
