2012-02-24 35 views
0

嘗試在頭div上重疊20-40px的頭div,但它顯示在頭div下面。任何幫助表示讚賞。需要顯示header div上面的內容div的部分內容,嘗試了margin和top CSS樣式

我嘗試使用margin-top:-20px和top:-20px,但沒有任何效果。

截圖內容DIV顯示container_12.header DIV

enter image description here

這裏背後的是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%; 
} 

回答

1

請注意您的z-index。由於您的content類在您的DOM樹中低於header,因此默認情況下它的值將會較低(z-index)。製作每個元素position: relative,併爲標題指定比您的contentz-index

1

你#內容,請嘗試使用z-index:1000;位置:固定,絕對或無效