css疊加問題

Question

嗨，大家好，我如何才能讓紅色疊加層在內容後面而不是內容上滑動？

.transparent_layer{ 
background: url('../images/overlay_repeat.png') repeat-y 0 0; 
width:810px; 
margin:0 auto; 
padding-top: 14px; 
height:0; 
z-index: -99999; 
background-color:red; 
}​ 

Answer 1

請看看這個http://jsfiddle.net/MZL5q/13/

CSS

.behind-layer { 
    background: url('../images/overlay_repeat.png') repeat-y 0 0; 
    width:810px; 
    margin:0 auto; 
    padding-top: 14px; 
    height:0; 
    z-index: 1; 
    position:absolute; 
    background-color:red; 
} 

.transparent_layer { 
    width:810px; 
    position:absolute; 
    z-index:2; 
} 

JS

$('.behind-layer').animate({ 
    height: '670' 
}, 5000, function() { 
    // Animation complete. 
    alert('completed'); 
}); 

HTML

<div class="behind-layer"></div> 
<div class="transparent_layer"> 
<!-- THE REST OF HTML CONTENT --> 

Answer 2

jsFiddle

您需要再拍格動畫與transparent_layer類，並使其position:absolute;：http://jsfiddle.net/MZL5q/3/

我與嘗試。

對於您的信息，如果這不是在您的網站的生產版本的頁面頂部，那麼您可能需要更改div的某些定位方面。我多次閱讀本教程。 CSS Positioning。