Problems with relative and absolute positioning - html

Question

Im having some issues achieving absolute positioning on an element. Im trying to implement two banner ads to stay stationary when the user scrolls through a div. I tried changing the parents position to relative and the children I want to remain static position to absolute. This gets the initial placement right, but I am still able to scroll past the absolute divs. Here is the appropriate CSS/HTML.
HTML:
<div id="pane1">
<div id="home-banner1" class="banner">
</div>
<div id="home-banner2" class="banner">
</div>
<?php ..... ?>
</div>
CSS:
#pane1{
width:100%;
background-repeat: repeat;
height:auto;
display:inline-block;
padding:20px 50px 50px 50px;
min-height:500px;
text-align:center;
position:relative;
}
.banner{
width:50px;
height:300px;
background-color:white;
position:absolute;
top:0;
}
#home-banner1{
left:0;
}
#home-banner2{
right:0;
}

Answer 1

Use position:fixed; for the banners so that it will stay on screen at fixed location even while you scroll up or down the page.
EDIT
For the hiding and displaying of banner only below that #container element, you could use some jQuery like this:
$(window).scroll(function() {
var top_div_height = $('#container').height(); // height of the blue top container
if ($(this).scrollTop() < top_div_height) { // hide the rightside banner if the user is viewing that blue top container
$('#home-banner2').css({
'display': 'none'
});
}
else{ //... otherwise show the rightside banner
$('#home-banner2').css({
'display': 'block'
});
}
});
Make sure you set the CSS rule position:fixed; for the #home-banner2 element.
Hope this will help.

Answer 2

Actually your code work exactly as expected.
Position: absolute move the element relative to the closest parent element with position: relative. So, if the parent element go outside the viewport, so it does the child absolute element.
To get the wanted result, you need some javascript/jquery to fix the element as its parent enter the viewport and 'unfix' when the parent leaves.
Something similar to the Bootstraps' affix