文本框不会转到Div的底部。绝对位置不起作用

Question

您好，我正试图为我的网站创建一个视差滚动效果。它部分有效。但是，我试图将文本框放在一个部分的底部，即＃slide-2。出于某种原因......它只是位于Div ...而不是位于底部。我试过了

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/