AUTOCOMPLETE jquery ui

Question

You guys, all right? I made a script in jQuery ui that uses Autocomplete in a search bar, the code works but when select appears with the options my header is over, what can be? Thank you

//JQUERY UI CODE

   $(function () {
    var Categorias = [
        "Doces",
        "Bebidas",
        "Hortifruti",
        "Frios e laticínios",
        "Higiene",
        "Marcearia",
        "Pães"
    ];
    $("#busca").autocomplete({
        source: Categorias
    });
});

//html code

<input class="ui-widget" type="text" name="busca" id="busca" style="display:none;" title="pesquisar" placeholder="Pesquise o seu produto" />
<button id="buscar_botao" style="display:none;">Buscar</button>

//CSS

input#busca {
    margin-top: 24px;
    width: 717px;
    border-radius: 5px;
    border: none;
    height: 41px;
    position: absolute;
    right: 165%;
    padding-left: 20px;
}
button#buscar_botao {
    width: 100px;
    height: 41px;
    border: none;
    margin-top: 24px;
    border-radius: 5px;
    background: #f3c705;
    cursor: pointer;
    font-family: "Oswald",sans-serif;
    position: absolute;
    right: 130%;
}

Answer 1

You must have set the z-index of your header (top red bar) with a value so that it is always above the rest of the page. With this, the div jQuery-UI is underneath because she has a z-index minor.

Solve this by putting one z-index in class .ui-front that is large enough that it is not below your header. Add a value with multiple in your CSS 9, something like that:

.ui-front{
   z-index: 999999;
}

Example 1: z-index minor

$(function () {
    var Categorias = [
        "Doces",
        "Bebidas",
        "Hortifruti",
        "Frios e laticínios",
        "Higiene",
        "Marcearia",
        "Pães"
    ];
    $("#busca").autocomplete({
        source: Categorias
    });
});

*{
   position: relative;  
}
#barra{
   background: red;
   padding: 100px;
   z-index: 999;
}

input#busca {
    xxxmargin-top: 24px;
    width: 717px;
    border-radius: 5px;
    border: none;
    height: 41px;
    position: absolute;
    xxxright: 165%;
    padding-left: 20px;
}
button#buscar_botao {
    width: 100px;
    height: 41px;
    border: none;
    xxxmargin-top: 24px;
    border-radius: 5px;
    background: #f3c705;
    cursor: pointer;
    font-family: "Oswald",sans-serif;
    position: absolute;
    xxxright: 130%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="barra">
Digite "a":
<br>
<input class="ui-widget" type="text" name="busca" id="busca" style="xdisplay:none;" title="pesquisar" placeholder="Pesquise o seu produto" />
<button id="buscar_botao" style="display:none;">Buscar</button>
</div>

Example 2: z-index major

$(function () {
    var Categorias = [
        "Doces",
        "Bebidas",
        "Hortifruti",
        "Frios e laticínios",
        "Higiene",
        "Marcearia",
        "Pães"
    ];
    $("#busca").autocomplete({
        source: Categorias
    });
});

*{
   position: relative;  
}
#barra{
   background: red;
   padding: 100px;
   z-index: 99;
}

input#busca {
    xxxmargin-top: 24px;
    width: 717px;
    border-radius: 5px;
    border: none;
    height: 41px;
    position: absolute;
    xxxright: 165%;
    padding-left: 20px;
}
button#buscar_botao {
    width: 100px;
    height: 41px;
    border: none;
    xxxmargin-top: 24px;
    border-radius: 5px;
    background: #f3c705;
    cursor: pointer;
    font-family: "Oswald",sans-serif;
    position: absolute;
    xxxright: 130%;
}

.ui-front{
   z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="barra">
Digite "a":
<br>
<input class="ui-widget" type="text" name="busca" id="busca" style="xdisplay:none;" title="pesquisar" placeholder="Pesquise o seu produto" />
<button id="buscar_botao" style="display:none;">Buscar</button>
</div>