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