CSS3のbox-shadowが効かない場合はposition:relative;で解決!

box-shadowをかけた要素に、影が出ない場合の対処方法です。

結論からいうとこの現象は、後に続く要素のbackgroundが指定されている場合(colorでもimageでも)に発生します。

header {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

headerにbox-shadowが指定されているにも関わらず影が出ていません。

そんな時はbox-shadowを指定した要素に「position:relative;」を追加してみてください。

header {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
	position:relative;
}

影が表示されるようになりました。

この他、後に続く要素に「position:relative」を指定する解決策もありますが、その場合は「z-index」も合わせて指定しなければならなくなってしまうので、基本的には↑の方法で良いと思います。

ページの先頭へ