jquery - CSS覆盖问题

Question

大家好，我怎样才能让红色叠加层滑到内容后面而不是内容？http://jsfiddle.net/MZL5q/3/

我正在尝试：

.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

jsFiddle

您需要制作另一个 div 以使用transparent_layer该类制作动画并制作它position:absolute;。

供您参考，如果这不在您的网站生产版本的页面顶部，那么您可能需要更改div's 的某些定位方面。我多次阅读本教程。CSS 定位。

Answer 2

请查看此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 -->