Text box will not go to bottom of Div. Position absolute doesn't work

Question

Hi I'm trying to create a parallax scrolling effect for my website. It partially works. However I'm trying to position a text box to stay at the bottom of a section i.e #slide-2. For some reason...it just stays on top of Div..rather than being positioned right in the bottom. I've tried

bottom:0;

and

position: absolute;

But position absolute makes the parallax effect not work.

#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

First you need to set height of the slide container:

#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;
}

Then use absolute positioning for the textbox area:

#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;
}

Here's a working fiddle: http://jsfiddle.net/mpspwcku/