CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする

CSS ネガティブマージンで重なった要素のリンクをクリックできるようにする

Posted at October 23,2008 1:55 AM
Tag:[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カラムリキッドレイアウト(フッタつき)をご利用の方は最新版をご利用ください。

Movable Type テンプレート

4.参考サイト

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)