css - 在另一个上重叠阴影 div

Question

我有 3 个 DIV，第一个是导航，第二个是导航的 SHADOW，第三个是内容，我希望 SHADOW div 覆盖/重叠在内容 DIV 上，可能会用 z-index 完成吗？或位置:固定？我尝试了很多东西，现在迷路了，请检查一下，请帮忙..

http://jsfiddle.net/3nqay/

 <div style="height:50px;background:green">this is navigation</div>
 <div id="shadow" style="height:30px; background: red url(IMAGE_PATH)"></div>
 <div id="content" style="background:blue; height:150px"> this main main content</div>

PS : 尝试了很多东西后，我删除了所有样式，这是基本结构

Answer 1

我不确定我是否理解你的意思，但如果你想将阴影向上移动并使其保持在文档的流动中，只需添加 margin-top:-5px;到影子div

 <div style="height:50px;background:green">this is navigation</div>
 <div id="shadow" style="margin-top:-5px; height:30px; background: red url(IMAGE_PATH)"></div>
 <div id="content" style="background:blue; height:150px"> this main main content</div>

编辑:如果那不对，我已经为您提供了 JSFiddle 的链接，希望对您有所帮助。

http://jsfiddle.net/3nqay/1/