z-indexを負の数にしたリンクを選択できない

症状

ポジショニングした祖先要素を持たないa要素のz-indexプロパティに負の値を指定すると、そのリンクをマウスなどのクリックによって辿ることができなくなる。

例示

<style type="text/css">
p.test {
  background: yellow;
}
p.test a {
  position: relative;
  z-index: -1;
}
</style>

<p class="test">→<a href="">Opera目次</a>←</p>

Opera目次

2つの矢印の間にa要素がありますが、z-indexプロパティの指定のためp要素の背景の裏に隠れています。リンクが機能するかを確認してください。

スクリーンショット

Ns7.1Netscape7.1標準モード

Op7.5Opera7.51標準モード

補足

親要素をポジショニングすることで、この不具合を回避することができます(親以外の祖先要素をポジショニングしても不具合を回避できません)。

<style type="text/css">
p.test2 {
  position: relative;
  z-index: 0;
  background: yellow;
}
p.test a {
  position: relative;
  z-index: -1;
}
</style>

<p class="test2">→<a href="">WinIE目次</a>←</p>

Opera目次

修正状況

  • Opera7.51の標準モードと互換モードで不具合の発生を確認しました。
  • Opera6.06でこの不具合は発生しないようです。

関連記事

スポンサーリンク

screen.fontSmoothingEnabled

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る