【CSS】z-indexが効かない場合の対処法

css

CSSで使用できる「z-index」プロパティ。
コンテンツの重なり順が指定できる、とても便利な機能ですよね。

ですが、それが効かない場合があります。
原因は大きく分けて以下の二つですので、それぞれ見ていきましょう。

実はz-indexは指定するだけでは機能しません。

前面、あるいは後面に表示したい要素に対してpositionを指定する必要があります。
positionプロパティは初期値で「static」を持っていますが、これではz-indexが機能しないんですね。

そのため「z-index」を指定するにはpositionを「static」以外にする必要があります。
単純に重なり順だけを何とかしたいなら「position:relative」を指定すると良いでしょう。

例えば、frontとbackという二つの要素を重ねたい場合には、以下のように指定すると良いでしょう。

.front{
    z-index2;
    position:relative;
    -- 省略 --
}

.back{
    psition:relative;
    z-index:1;
    -- 省略 --
}

.front{

z-index2;

position:relative;

-- 省略 --

}

.back{

psition:relative;

z-index:1;

-- 省略 --

}

上記のようにすれば、frontのコンテンツがbackのコンテンツの前面に来ます。

before要素、after要素にz-indexを指定する場合は、親要素に注意です。
親要素にz-indexを指定してしまうと、before要素などにz-indexが効きません。

例えば、以下のようにすることで回避が可能です。

.parent{
    position:relative;
    -- 省略 --
}

.parent:before{
    position:absolute;
    z-index:2;
    -- 省略 --
}

.parent{

position:relative;

-- 省略 --

}

.parent:before{

position:absolute;

z-index:2;

-- 省略 --

}

before、after要素が上手く重ならない場合は、親要素にz-indexを設定していないか確認してみてください。