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

您需要使用transparent_layer类制作另一个div来制作动画并将其设为position:absolute;。

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

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 -->

css叠加问题

2 个答案: