嘗試在頭div上重疊20-40px的頭div,但它顯示在頭div下面。任何幫助表示讚賞。需要顯示header div上面的內容div的部分內容,嘗試了margin和top CSS樣式
我嘗試使用margin-top:-20px和top:-20px,但沒有任何效果。
截圖內容DIV顯示container_12.header 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>
CSS對於那些div的
.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%;
}