TopCSS > 2008年10月
2008年10月23日

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

October 23,2008 1:55 AM
Tag:[]
Permalink

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.参考サイト

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3