div will not scroll under another div - css

Question

I have a need to get the TextBoxesGroup scrolling under the image on the top if the visitors scroll up or under the Add to basket in the footer if the visitors scroll down.
My footer add-to-wrap is pretty much fixed but the problem is that the div will not scroll undless it goes well under the footer and then when I scroll the add-to-wrap div also scrolls.
What am I doing wrong?
<style>
.wrong_email{
display:none;
color:red;
}
.add-to-wrap {
width: 100%;
display: block;
position: fixed;
bottom: 0;
margin: 0 auto;
text-align: center;
background-color: rgba(0,0,0,0.6);
padding: 10px 0 10px 0;
z-index: 3;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4" style="padding-left:0px; padding-right:0px;">
<img src="/brand/nvite.png" class="img-responsive"/>
</div>
<div>
<form method="POST" id="login_form">
<div id='TextBoxesGroup' class="textboxes-area">
<div id="TextBoxDiv1">
<input type='text' id='textbox1' name='textbox_1' class="form-control" placeholder="Enter email address here"/>
</div>
<div class="wrong_email" id="err_1">Wrong email address</div>
<div class="divider"><img src="/mobileimages/brand_takeovers/divider_invite.png" class="img-responsive"/></div>
<div id="TextBoxDiv2">
<input type='text' id='textbox2' name='textbox_2' class="form-control" placeholder="Enter email address here"/>
</div>
<div class="wrong_email" id="err_2">Wrong email address</div>
<div class="divider"><img src="/mobileimages/brand_takeovers/divider_invite.png" class="img-responsive"/></div>
<div id="TextBoxDiv3">
<input type='text' id='textbox3' name='textbox_3' class="form-control" placeholder="Enter email address here"/>
</div>
<div class="wrong_email" id="err_3" >Wrong email address</div>
</div>
<span id='addButton' class="send-invite-more-boxes "/><img src="invitemore.png" class="img-responsive"/></span>
</div>
</div>
</div> <!-- /container -->
<div class="add-to-wrap">
<button type="submit" class="send-invite-button">Add To Basket</button>
</div>
</form>