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。