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

Question

我有一个在我的输入框上弹出的 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>

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

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