Return of jquery autocomplete returning at top

Question

I created a top complete with jquery, plus the return box is rising to the top of the page, as it could adjust?

Follow image of example:

Follow the code of the autocomplete:

Test 01

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">

$(document).ready(function() {
  $("#produto").autocomplete({
    source: 'functions/pesquisa-itens.php',
    minLength: 1,
    select: function(event, ui) {
      $('#produto').val(ui.item.prod_final);
    },
    position: { 
      my: "left bottom",
      at: "left top",
      of: $("#produto"),
      collision: "flip flip"
    }
  });
});

Test 02:

$(document).ready(function() {
  $("#produto").autocomplete({
    source: 'functions/pesquisa-itens.php',
    minLength: 1,
    select: function(event, ui) {
      $('#produto').val(ui.item.prod_final);
    }
  });
});
$(".ui-autocomplete").position({
  my: "left bottom",
  at: "left top",
  of: $("#produto"),
  collision: "flip flip"
});

HTML:

   <form class="form-horizontal">
     <div class="row">

      <div class="col-md-6">
        <div class="ui-widget">
          <label for="produto">Produto:</label>
          <input type="text" class="form-control" id="produto" name="produto">
        </div>
      </div>

Answer 1

Use the jquery function position

$(".ui-autocomplete").position({
    my: "left bottom",
    at: "left top",
    of: $("#produto"),
    collision: "flip flip"
});

Place the following selector in CSS:

 .ui-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    display: inline;
    min-width: 160px;   
    padding: 4px 0;
    margin: 0 0 10px 25px;
    list-style: none;        
}