重叠阴影div在另一个

我有3个DIV，第一个是导航，第二个是SHADOW的导航，第三个是内容，我希望SHADOW div覆盖/重叠在cotive DIV上，可能会用z-索引？或位置：固定？我尝试了很多东西，现在失去了，请检查并请帮助..重叠阴影div在另一个

<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：想这么多事情之后，我删除了所有的风格，这是基本的结构

来源

2014-03-07 user1718343

我不确定我是否理解你的意思，但是如果你想将阴影向上移动并保存在文档流中，只需添加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/

来源

2014-03-07 01:13:10 Dave

这是一个CSS的问题比什么都重要，我建议对CSS的位置和Z-指数读了。

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>

来源

2014-03-07 01:54:48 rsynnest

添加以下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 */ 
}

注：如果您添加或position:relative向position:absolute＃内容，在这种情况下，你必须使用z-index。

来源

2014-03-07 05:39:48 Iqbal

重叠阴影div在另一个

回答

相关问题