WEB系キャンパス

(K)ネガティブマージンで重なったBOXがリンクを押せなくなった時の対処法

negative-margin

とあるサイトのコーディング時に起きたハプニング。
ネガティブマージン(マイナスの値)が重なっている領域にリンクをクリックできず、テキストも選択できない現象がありました。めったに起こらない現象だけに、ちょっと焦りましたが対象法は意外とシンプルだったので備忘録としてまとめておきます。

普通にコーディングしてて、ネガティブマージンを設定しただけなら今回の現象は起こらないですが、どうやらネガティブマージンを設定したエリアに「position: relative;」を設定していると、今回のような現象が起こるようです。

DEMO

調べてみると、単純に前後関係の問題で、ネガティブマージンを設定した下のエリアが上のエリアより上に来ているので、クリックができなくなっている模様。
対処法は、リンクできなくなっているエリアに以下の記述を足してあげれば解決します。

position: relative;
z-index: 1;  

DEMO

z-indexの前後関係の設定は初期値の「position:static」では効かないので、下のエリアと同じように「position: relative;」を設定して、同じ位置にいる必要があります。
前後関係の感覚がつかめていれば、そこまで難しい解釈ではないですね。今回は以上です。

Comment Form