JQuery UI Autocomplete, how to go over other elements

So I have tried two methods:

<div id = "team-search-container">
    <label for="team-search" class = "text-center">
         <input type = "text" id = "team-search">
    </label>
</div>

If I do this:

$( "#team-search" ).catcomplete({
    delay: 0,
    source: teamdata,
    appendTo: '#team-search-container'
});

It will expand the div to show the elements, like this: (Ignore where it says ComboBox elements, I meant to write Autocomplete elements)

But if I do something like this, without the appendTo option,

$( "#team-search" ).catcomplete({
    delay: 0,
    source: teamdata
});

It will work fine, but at the end of the body, it will make the empty space equivalent to the height of the autocomplete. Here is my CSS:

.ui-autocomplete{
    position: relative;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;
}

.ui-autocomplete-category{
    font-size: 18px;
    list-style: none;
    width: 200px;
}

.ui-menu-item{
    list-style: none;
    width: 200px;
    cursor: default;
    background-color: #565656;
}

.ui-helper-hidden-accessible {
    display: none;
}

So since I have a max-height of 600px, it will create 600px of empty space at the bottom of the page if I don't append it to anything, even though it shows the autocomplete right under my search bar.