CSS:float指定の要素でリンクをクリックできない理由は上に別の要素が被さっていたからだった

スタイルシートにて、要素に float を追加し、要素の左側、右側に固定するといった方法を良くやります。

その時に、次のような指定を行った時、何故か float を指定した要素のリンクがクリックできなくなるという現象が発生しました。

コード

<span style="float:right;"><a href="javascript:alert('クリック!');">クリックして！</a></span>
<h1 style="width:100%;">タイトル要素</h1>

結果

ずっと理由がわからなかったのですが、次のページを見てはっと気が付きました。

小粋空間: CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
http://www.koikikukan.com/archives/2008/10/23-015555.php


上記の例でいえば、要素「<span style="float:right"><a href="javascript:alert('クリック!');">クリックして！</a></span>」の上に「<h1 style="width:100%;">タイトル要素</h1>」が被さっていたために、クリックを拾えなかったということです。

そこで、上記ページを参考にし、z-index を設定することで、クリックできるようにしました。

コード

<span style="float:right;position: relative;z-index: 2;"><a href="javascript:alert('クリック!');">クリックして！</a></span>
<h1 style="width:100%;">タイトル要素</h1>

結果

理由はわかってしまえば簡単ですが、要素の重なりを考慮しないといけないですね。