html - 如何在其正下方的元素上绘制CSS框阴影？

Question

请参阅以下 jsfiddle。 http://jsfiddle.net/Lj56ehwf/

.shadow {
    padding: 10px;
    background-color: red;
    box-shadow: 0 0 10px #000;
}
.container {
    background-color: #d2d2d2;
    margin: 0 100px;
}

<div class="shadow">
    Text
</div>
<div class="container">
    This container is drawn <strong>over</strong> the box shadow.
</div>

你如何确保盒子阴影绘制在容器上？而不是阴影上方的容器。我认为更改元素顺序不是一个好主意。

Answer 1

给.shadow一个更高的z-index。

.shadow {
  position: relative;
  padding: 10px;
  background-color: red;
  box-shadow: 0 0 10px #000;
  z-index: 1;
}
.container {
  background-color: #d2d2d2;
  margin: 0 100px;
}

<div class="shadow">
  Text
</div>
<div class="container">
  This container is drawn <strong>over</strong> the box shadow.
</div>