2008年10月23日
CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする
CSS レイアウトでネガティブマージンを使っていると、一部のモダンブラウザでリンクがクリックできなかったり、マウスでテキストを選択できない状態になる場合があります。
配布中の Movable Type 4.2 テンプレートをご利用の方からご指摘を頂きましたが、ネガティブマージンを使った CSS レイアウト全般で有効な対処方法と思われるので、備忘録として残しておきます。
１．問題点
次のように、左サイドバーの「Movable Type 入門セミナー」にマウスをポイントしてもリンクがアクティブになりません。
なお、この問題に関する、Windows XP での各ブラウザの動作状況は次の通りでした。
- FireFox3.0.3：NG
- Safari3.1.2：NG
- Opera9.5.2：OK
- Google Chrome：NG
- IE6：OK
- IF7：OK
２．原因
中央カラムにネガティブマージンを設定しているのですが、左サイドバーのマークアップが中央カラムより後方にあるため、左サイドバーのボックスが（ネガティブマージンにより）中央カラムの下に重なってしまっていたようです。
３．対処方法
クリックできないボックスに、次のようなプロパティを与えます。
#links-left {
position: relative;
z-index: 2;
}z-index はボックスの重なりの順序を指定する際に使用します。値は 0 を基準とし、値が大きいものが上に重なります。ここでは 2 を指定して中央カラムのボックス（z-index 指定なし）より上に重なるようにしています。
なお、z-index はpositionプロパティでstatic以外の値が指定されている要素に適用されるので、position プロパティを併せて設定しています。
これでテキスト選択やリンクがアクティブになります。
配布中の Movable Type テンプレートも修正致しました。3カラムリキッドレイアウト（フッタつき）をご利用の方は最新版をご利用ください。
４．参考サイト
Comments [0]
| Trackbacks [0]
