~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月26日月曜日

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>

結果




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


スポンサーリンク

コメントを投稿

コメント投稿機能について