使用css将div悬停在输入框的顶部

Question

我在输入框上弹出一个div（javascrip auto complete）。 div目前在输入框后面弹出，我怎么能把它出现在ontop上？

问题截图：

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>

一如既往地感谢您的帮助，

Answer 1

尝试在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
}

Answer 2

设置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;
}