相対的に配置された親要素の z-index を設定すると、疑似要素をその背後に配置できないという問題があります。
例: http://dabblet.com/gist/2948390
HTML:
<div class="img"><img src="http://lorempixel.com/500/344"></div>
CSS:
.img {
background:#fff;
z-index:10;
position:relative;
width:500px;
height:344px;
border:1px solid black;
padding:10px;
}
.img:after {
content:'';
z-index:0;
position:absolute;
bottom:-5px;
left:10px;
width:50%;
height:20%;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
}
ここで、親要素から z-index を削除し、疑似要素の z-index を負に変更すると、機能することがわかります。
http://dabblet.com/gist/2948402
残念ながら、ページの残りの部分に配置されているため、その方法は使用できません。親要素に z-index を設定できる必要があります。
私の最初の例がそのように機能している理由は何ですか?