尝试将标题 div 重叠 20-40px,但它显示在标题 div 下方。感谢您的帮助。
我尝试使用 margin-top: -20px 和 top: -20px,但没有任何效果。
显示在 container_12.header div 后面的内容 div 的屏幕截图
这是 html:
<div class="container_12 header"></div>
<div class="container_12 content">
<div id="content">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="container_12 footer">
<div id="footer">
Footer text
</div>
</div>
那些 div 的 CSS
.container_12.header {
background-color:#AD986A;
height:231px;
width:100%;
background:url('../img/header_bg.png');
overflow: visible;
}
#content {
width:960px;
margin:-20px auto 15px auto;
padding:5px 10px;
border:7px solid #fff;
background-color:#fcc;
-moz-box-shadow: 0px 2px 6px #969696;
-webkit-box-shadow: 0px 1px 6px #969696;
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=0),
progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=90),
progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=180),
progid:DXImageTransform.Microsoft.Shadow(Color=#969696, Strength=7, Direction=270);
}
.container_12.content {
background-color:#FFF6E5;
width:100%;
overflow: auto;
}
#footer {
width:960px;
margin:0em auto;
overflow:auto;
color:#fff;
}
.container_12.footer {
background-color: #AD986A;
color:#fff;
font-size:12px;
margin: 2px 0 7px 0;
padding: 5px 0;
font-family: Arial, Verdana, sans-serif;
width:100%;
}
最佳答案
注意你的z-index
。由于您的 content
类位于 DOM 树中的 header
之下,因此默认情况下它将具有较低的 z-index
值。使每个元素 position: relative
并为 header 提供比您的 content
更低的 z-index
。
关于html - 需要在 header div 上方显示部分内容 div,尝试了 margin 和 top css 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9437262/