文本框不会转到分区的底部。绝对位置无效

Question

嗨，我正在尝试为我的网站创建一个视差滚动效果。它部分起作用。然而，我试图定位一个文本框，以保持在底部的一节，即#幻灯片-2。对于一些人来说，reason...it只是停留在Div..rather的顶部，而不是被定位在底部。我试过了

bottom:0;

和

position: absolute;

但位置绝对使得视差效应无效。

​

​

#slide-2 .bcg {background-image:url("http://oilguru.org/wp-content/uploads/2012/06/Refinery-Sunset-Scenic-for-Oil-Guru-Recruitment-e1339505787369.jpg");
position: relative;
}

 slide-2 .hsContent {
        bottom: 0px;
        position: relative;
}


slide-2 .hscontainer {

        width: 100%;
        height: 100%;
        overflow: hidden;
        position:relative;
}

  #slide-2 h2 {
                 background-color: rgba(0,0,0,0.6);
                bottom: 0;
                /* top: 20%;*/
                color: #ffffff;
                  font-size: 15px;
                line-height: 20px;
}

html：

                <section id="slide-2" class="homeSlide">


   <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-top-bottom="background-position: 50% -100px;"
        data-bottom-top="background-position: 50% 100px;"
        data-anchor-target="#slide-2"
    >





<h2>Text box area
</h2>
</div>
</section>

Answer 1

首先，需要设置幻灯片容器的高度：

#slide-2 .bcg {
    background-image:url("http://oilguru.org/wp-content/uploads/2012/06/Refinery-Sunset-Scenic-for-Oil-Guru-Recruitment-e1339505787369.jpg");
    position: relative;
    height:300px;
}

然后对文本框区域使用绝对定位：

#slide-2 h2 {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 15px;
    line-height: 20px;
    margin:0;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

这是一个有用的小提琴：http://jsfiddle.net/mpspwcku/