jQuery-UI's autocomplete not display well, z-index issue

Use z-index and !important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}  

While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },

Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1