5

私のWebアプリでは、Webページの上部にある固定ツールバーに検索ボックスがあります。このようにツールバーの固定位置を実装しました。

#toolbar {
        position: fixed !important; 
        position: absolute;
        height: 25px;
        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0;
        z-index: 100;
        font-size: 12px;
    }

現在、 jQueryプラグインを使用してキーワードオートコンプリート関数を実装しています。

私の問題は、ウィンドウがスクロール/サイズ変更されたときに、オートコンプリートの候補を検索ボックスに固定/添付したままにする方法です。

オートコンプリートの提案ボックスのCSSは...です。

element.style {
   display:none;
   left:166px;
   position:absolute;
   top:96px;
   width:130px;
}
.ac_results {
   background-color:white;
   border:1px solid #C5DBEC;
   overflow:hidden;
   padding:0;
   z-index:99999;
}

これらの操作を実行すると問題が発生します。

  1. 検索ボックスに何かを入力すると、候補が表示されます
  2. 検索ボックスを開いた状態で、ウィンドウをスクロールします。
  3. これにより、自動提案ボックスもスクロールされます。

このバグを解決するにはどうすればよいですか？

これがどのように見えるかです。

代替テキスト

オートコンプリートは、固定位置の入力ボックスをスクロールしました。

更新1：position: fixed;オートコンプリートにを追加してみました。

それは別の場合に問題を引き起こします。

  • 検索ボックスに何かを入力すると、候補が表示されます
  • エスケープを押すと、ボックスが消えます
  • ウィンドウを下にスクロールします
  • 検索ボックスに何かを入力すると、候補が表示されます
  • これで、検索ボックスは、位置が固定されているため、スクロールする前に表示されていた位置に表示されます。

更新：

代替テキスト

アップデート2：

オートコンプリートcssに追加された次のコードがそのトリックを実行します。

.ac_results {
       background-color:white;
       border:1px solid #C5DBEC;
       overflow:hidden;
       padding:0;
       z-index:99999;
       position: fixed;
       top: 0px;
       margin: 20px 0px 0px 0px; /* The top margin defines the offset of textbox */
    }

よろしく

4

3 に答える 3

3

検索結果も作ってみませんposition: fixedか？テキストボックスの高さがわかっている限り、常にテキストボックス要素のすぐ下になるように結果リストを配置できます。

于 2010-08-25T10:01:35.887 に答える
1

結果リスト（position：absoluteを持つ）を含むコンテナー上のposition：relativeは、問題を解決します。

于 2014-08-26T07:50:32.457 に答える
0

position:fixedあなたが求めていることをする方法ではありません。

position：absoluteは問題を解決しているはずですが、ブラウザのバグ（テストしたブラウザ）か、プラグインまたはcssの何かがで上書きされているposition:absoluteとposition:fixed思います-FirefoxでFireBugをチェックして、実際のCSSがドロップダウンボックスに適用されますか？

あなたが見ているものを説明するために私が考えることができる2つの原因はこれらだけです。

于 2010-08-25T10:23:20.113 に答える