ラック
Home > ブログ > 記事 > 2015年7月 > box-shadowが効かない(2)

box-shadowが効かない(2)

カテゴリ: ホームページ

以前取り上げた付箋の影が消える問題。

ヘッダを上端固定にするためにposition:fixedとかその関連で他の要素と重なることが生じるようになったので他の部分も含めてz-indexを指定したら、前回のようにメインコンテンツを覆う部分にopacity:0.9を指定していたにも関わらず影がまた消えるという事態に遭遇…。

このサイトが参考になりました。どうもこの「スタックコンテキスト」が問題の原因…というか、z-indexの挙動をきちんと理解していなかったことが問題の原因ですね。

全部を理解できたわけではありませんが、とりあえず今回の場合は「box-shadowを使用する要素の祖先の中でより近い要素にスタックコンテキストを生成するような記述を行う」ことで影を表示させることができる、というのは分かりました。

なので、メインコンテンツ全体を覆う要素ではなく、記事のタイトル(この中で付箋の装飾を使用している)にスタックコンテキストの基準を生成する記述…opacity:0.9を指定して、無事に影を復活させることができました。

z-indexってわりと面倒くさいですね…。

タグ: css, html, バグ

 



関連する記事一覧