0

入力ボックスの上にポップアップする div があります (javascrip オートコンプリート)。現在、div は入力ボックスの後ろにポップアップ表示されていますが、これを上に表示するにはどうすればよいですか?

問題のスクリーンショット:

ここに画像の説明を入力

CSS コードは次のとおりです。

body {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }

    h3 {
        margin: 0px;
        padding: 0px;   
    }

    .suggestionsBox {
        position: absolute;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #000;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }

    .suggestionList {
        margin: 0px;
        padding: 0px;
    }

    .suggestionList li {

        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover {
        background-color: #659CD8;
    }

HTML コードは次のとおりです。

    <div>
    <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
    </div>

いつも助けてくれてありがとう、

4

2 に答える 2

4

z-indexでプロパティを使用してみてください.suggestionsBox

.suggestionsBox {
    position: absolute;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #000;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000; 
    color: #fff;
    z-index: 999; <------ Here
}
于 2012-11-15T10:12:09.683 に答える
1

プロパティを設定しz-indexます。

.suggestionsBox {
    position: absolute;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #000;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000; 
    color: #fff;

    z-index: 100;
}
于 2012-11-15T10:11:28.800 に答える