Stop datepicker from floating around

I have a problem with datepicker calendar floating around. I need to stop it from doing so. I need it to stay at the input box.

$('.date').datepicker({
  format: 'mm-dd-yyyy',
  autoclose: true
});

$('.close-button').unbind();

$('.close-button').click(function() {
  if ($('.datepicker').is(":visible")) {
    $('.date').datepicker('hide');
  } else {
    $('.date').datepicker('show');
  }
});

Below is the fiddle: https://jsfiddle.net/qgzwwt70/4/

Help.

You can achieve the desired behavior by calculating the top offset of the date picker popup on window scroll.

$("#GIOCFModal").scroll(function(){

 if($('.datepicker-dropdown').length == 1)
 {
 if($('.date').offset().top > $('.datepicker-dropdown').offset().top)
 {
   var value = $('.date').offset().top  - 15 - $('.datepicker-dropdown').height();
 }
 else
 {
   var value = $('.date').offset().top + 35;
 }

 $('.datepicker-dropdown').offset({top:value})
 }

});

Working fiddle : https://jsfiddle.net/vLbphkq9/