如何指定图层的顺序（特别是阴影）？

Question

我希望红色部分的阴影与白色部分重叠，而不是相反。

适用的CSS：

#container { (the white part)
  width: 960px;
  margin: 0 auto 24px auto;
  background: #FFFAFA; /*background: url(images/grid.png) center top no-repeat;*/
  box-shadow: 0px 5px 45px #343434;
}

#banner { (the red part)
  background: -moz-linear-gradient(top, #BC4E4C 0%, #9E403F 100%);
  background: -webkit-linear-gradient(top, #BC4E4C 0%, #9E403F 100%);
  height: 40px;
  width: 100%;
  box-shadow: 0px 10px 10px #343434;
  border-bottom: 1px solid #612525;
}

如果重要的话，横幅是在HTML中的主要内容之前。谢谢！

Answer 1

只需将position: relative添加到#banner就可以了 - 我们会创建一个新的"stacking context"。

---

为了安全起见：如果你的问题中没有其他元素，你也希望阴影显示在上面，可能也需要z-index: a number。

Answer 2

使用css属性z-index。较高的z-index表示该元素位于前面。

在您的示例中添加

#container {
  z-index: 1;
}
#banner {
  z-index: 2;
}

它会起作用。