Question

我想在文本输入框的开头显示一个搜索图标。

目前我的代码如下：

<div id="search-icon"></div>
<input type="text" name="search" id="search"/>

我的CSS：

#search-icon {
    display:inline-block;
    background-color:#455a21;
    height:60px;
    width:60px;
    border:thin solid black;
    border-radius:30px;
    z-index:100;
}

input#search {
    position:relative;
    top:-25px;
    left:-30px;
    padding:10px;
    padding-left:35px;
    border-radius:20px;
    border:thin solid #6d6e71;
    z-index:1;
}

它将div显示在我想要的位置，但在实际文本框下方。当我将搜索图标位置更改为绝对位置时，它会搞定我的位置。

我该怎么翻？

Answer 1

您可以使用两者的相对位置来解决它。但只需改变他们的z指数。

#search-icon {

background-color:#455a21;
height:60px;
width:60px;
border:thin solid black;
border-radius:30px;
z-index:100;
position: absolute;
z-index: 2;
}

input#search {
position:absolute;
top:15px;
left:30px;
padding:10px;
padding-left:35px;
border-radius:20px;
border:thin solid #6d6e71;
z-index:1;}

这就是您要找的here

Answer 2

您是否在谈论将搜索图标置于输入#search之上？

如：http://jsfiddle.net/52YfE/？

Answer 3

我不知道你想要什么，但请查看这个http://jsfiddle.net/V8AZE/

div没有显示在文本框上方

3 个答案: