By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,841 Members | 854 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,841 IT Pros & Developers. It's quick & easy.

Float and position: relative makes link unclickable

P: n/a
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.1 (GNU/Linux)

iD8DBQBDNmLx6nfwy35F3TgRAtjIAJ9ryEjr0kaaEapRD0z1bH QYmKi+1wCdEOZC
/wY2033SyIVl0za07v8RMkk=
=6BZ+
-----END PGP SIGNATURE-----
Sep 25 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a


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/
Sep 25 '05 #2

P: n/a
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.1 (GNU/Linux)

iD8DBQBDOFTe6nfwy35F3TgRAhZkAJ9AXvrtcfqyklrdJDPrya oKtjKa4QCgixEz
q3f1dKuferzyVS/6AeKLz/I=
=rVrU
-----END PGP SIGNATURE-----
Sep 26 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.