如何防止框阴影显示在另一个元素上？

Question

所以我经常遇到这个问题，但直到最近的一个项目才让我非常恼火。

<div style="background-image:url(img/s_top_ribbon_terminal.png); height:6px;"></div>

<div style="background-color:#FFF; box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -moz-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -webkit-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px;">Lorem Ipsum</div>Lorem Ipsum

基本上，情况是这样的：我有一个带有图像或文本的元素位于另一个包含框阴影的元素之前。然后，当我希望第一个元素“在”（如果有意义的话）第二个元素的阴影“前面”时，框阴影将继续越过第一个元素。我怎么能做到这一点？我尝试了 z-index，但这似乎并没有真正起作用？

Answer 1

z-index 将起作用。确保在元素上使用定位（绝对、相对或固定）。