jQuery-UIのオートコンプリートがうまく表示されない、z-indexの問題

現在、クライアントのWebショップでjQueryUIのオートコンプリートを実装しています。問題は、オートコンプリートが存在する要素が、オートコンプリートのzインデックスよりも高いzインデックスを持っていることです。オートコンプリートのz-indexを手動で設定しようとしましたが、jQueryUIがこれを上書きしているように感じました。

実際、私の質問はオートコンプリート候補リストの重複したz-indexですが、どうすれば変更できますか？、でも答えがなかったので、もう一度やってみようと思いました。

どんな助けでも大歓迎です！

マルティン

使用z-indexして!important

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

検索中にこのトピックを見つけました（http://forum.jquery.com/topic/alternating-style-on-autocomplete）。どうやらオートコンプリートボックスのスタイルを変更する唯一の方法は、javascriptを介してそれを行うことです：

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

親Divのz-indexを変更すると、オートコンプリートメニューにdivのz-index +1が表示されます。

のCSSでjQuery UI：

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

これを試してください。実行時または初期化時にz-indexを操作できます

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});

オートコンプリートテキスト入力に対してより高いz-indexを適用できる場合、これが問題の解決策です。

jQuery UIオートコンプリートオプションリストは、添付されているテキスト入力のz-indexを取得して、そのz-index値を計算し、その値に1を加算します。

したがって、テキスト入力に999のz-indexを指定すると、オートコンプリートのz-index値は1000になります。

http://bugs.jqueryui.com/ticket/5489から取得

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

また、アイテムを追加する場所も確認してください。オートコンプリートを内部divに追加したときにこの問題に遭遇しましたが、オートコンプリートをbodyタグに追加すると、問題は解決しました。

jquery-uiダイアログを使用している場合は、オートコンプリートがダイアログの下に表示される前に、ダイアログを初期化するように注意してください。

モーダルUIダイアログ内のjqueryUIオートコンプリートのこの回答を見てください-提案が表示されていませんか？

とにかく、firebugではなくcssで（スクリプトをロードする前に）試してみてください。

.ui-selectmenu-menu {
    z-index:100;
}

私の場合、これは機能し、次のようなzインデックスを作成します：100x（たとえば1002）

以下を追加します

.ui-autocomplete
{
    z-index:100 !important;
}

jquery-custom-ui.cssファイル（または使用している場合は縮小されたファイル）内。

まだこのプラグインを使用している開発者向け。これを試して：

.acResults
{
    z-index:1;
}

私にとってはz-index：1で十分でした、あなたの場合に必要な値を設定してください。