Question

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

 <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/

Answer 2

这是一个CSS问题，我建议阅读CSS位置和Z-index。

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

CSS：

#nav {
height:50px; 
background:green; 
position:relative;}

#shadow, #content {
width: 100%;
position: absolute;
top: 0;
left: 0;}

#shadow {
height:30px; 
backround:red; 
z-index:10;}

#content {
background:blue;  
height:150px;}

HTML：

<div id="nav"> this is navigation </div>
<div style="position:relative">
<div id="content"> this main main content</div>
<div id="shadow">this is shadow</div>
</div>

Answer 3

添加以下CSS。

body {
    margin: 0;
    padding: 0;
}
#shadow {
    position:absolute;
    width: 100%; /* or your specific width in px */
}

或尝试

#shadow {
    position: relative;
}
#content {
    margin-top: -30px; /* Equal to #shadow height */
    padding-top: 30px; /* Equal to #shadow height */
}

注意：如果您向#content添加position:relative或position:absolute，那么您必须使用z-index。

在另一个上重叠阴影div

3 个答案: