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

Question

我是一个弹出式输入框（javascrip自动完成）的div。 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; 
}