How do I change the position of JQuery Autocomplete from the top of the page?

Question

I have a JSFiddle here. Whenever I use the autocomplete, the available options appear at the top of the page, instead of below the text box. Other questions here hasn't helped.

What I want to do is move the available options below the text box, but I don't know how to do it.

HTML here

<br><br><br><br><br><br><br><br><br><br><br>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags" />
</div>

Javascript here

$(function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });

  });

Answer 1

You were using old jquery js and jquery ui js files i have added the new ones in the fiddle and its working fine

Check this Fiddle

Answer 2

It might a bug in jsFiddle or maybe you load incompatible versions of jQuery and jQuery UI.

Here is it, same HTML and same code, working in JS Bin : http://jsbin.com/abEFUQE/1/

So don't worry, it will be OK on your site.