9

jQueryオートコンプリートウィジェットのデフォルトの動作では、結果リストを入力の1つ上のz-indexレベルに配置して、入力が常に表示されるようにしますが、私の場合、これはテキスト入力要素を覆い隠すという望ましくない影響を及ぼします。

openメソッド内から結果リストの入力要素より少なくとも1レベル上のz-index値入力要素を設定しようとしましたが、あまり成功しませんでした。

open: function () {
    setTimeout(function () {
        $(this).css('zIndex', 10000);
    }, 1);
},
close: function () {
    $(this).css('zIndex', 0);
}

入力要素のz-indexレベルは10000に昇格しますが、結果リストのz-indexレベルはレベル1のままですが、入力要素はその下に表示されます。

なぜこれが起こっているのかについて誰かが手がかりを持っていますか？結果リストと入力要素の位置属性は、それぞれ絶対属性と相対属性に設定されます。それが原因でしょうか？

4

3 に答える 3

28

これを行うには、スタイルシートに簡単なルールを追加します。

#your_input {
    position: relative;
    z-index: 10000;
}
.ui-autocomplete {
     z-index: 9999 !important;
}

それはすべての仕事をするはずです、私はそれをfirebugでテストしました

于 2012-08-26T15:37:41.590 に答える
13

このコードは、追加のCSSやタイムアウトなしでz-index（jQueryUI 1.8）の問題を解決しました

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}
于 2013-10-11T10:18:16.800 に答える
0

あなたは本当にz-index-をいじる必要はありません

.shadow {
  -moz-box-shadow:    2px 2px 2px 1px #ccc;
  -webkit-box-shadow: 2px 2px 2px 1px #ccc;
  box-shadow:         2px 2px 2px 1px #ccc;
}

デモ

于 2012-08-27T05:21:02.607 に答える