小粋空間  -  a cheap joke and a play on words site

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カラムリキッドレイアウト（フッタつき）をご利用の方は最新版をご利用ください。

Movable Type テンプレート

４．参考サイト

• z-index－スタイルシートリファレンス
• CSS の透明バック