positioning-problem-when-scrolling-down-webpage

positioning-problem-when-scrolling-down-webpage

i try very simple code here by have so many break lines so i can scroll down to the page.  when i scroll down, click on the text box, the pop up calendar dosen't appear next to the text box, i appears all the way on the top.  is there the way to make the calendar appeas next to the text box.
 
thanks

<link rel="stylesheet" href="css/jquery-ui.css" />
 <script src="scripts/jquery-1.9.0.js"></script>
 <script src="scripts/jquery-ui.js"></script>
 
<script>
    $(function() {





       $("#datepicker").datepicker({ minDate: 0 });

    });

</script>

 <cfoutput> #repeatstring("<br>",100)# </cfoutput>
 <cfform>
 <cfinput type="text" value=""  id="datepicker" name="sale_date"  />

 </cfform>