box-shadowが効かない

box-shadowを付けたいボックスの下の要素にbackgroundが入っているとbox-shadowが効かない・・・というか見えなくなってしまう。

↓の図でいうと、1番目のDIVは2番目のDIVのbackgroundがnoneなのでシャドウが効いてる。
2番目のDIVは3番目のDIVにbackgroundが入っているため効かなくなっている。
3番目のDIVは下に何もないので効いてる。

2014-06-23_011948

 

解決策

▼効かなくなってしまったボックスにこれをつける

div#box02{
	position:relative;
	z-index:2;
}

z-indexの値は適当に。

2014-06-23_012726

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>