How do I specify an order for layers (specifically shadows)?

I'd like for the shadow of the red part to be overlapping the white part, rather than vice-versa.

Applicable 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%开发者_如何学Python);
  background: -webkit-linear-gradient(top, #BC4E4C 0%, #9E403F 100%);
  height: 40px;
  width: 100%;
  box-shadow: 0px 10px 10px #343434;
  border-bottom: 1px solid #612525;
}

In case it's important, the banner's before the main content in the HTML. Thanks!

Simply adding position: relative to #banner should do it - a new "stacking context" will be created.

Just to be safe: you might also need z-index: a number if there are other elements not included in your question that you'd also like the shadow to appear on top of.

Use css property z-index. Higher z-index means the element gets in front.

In your example add

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

and it will work.