0

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

目前我的代码如下所示：

<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，但在实际文本框下方。当我将搜索图标位置更改为绝对位置时，它会搞砸我的定位。

我怎么刷它？

4

3 回答 3

3

您可以使用两者的相对位置来解决它。但只需更改它们的 z-index。

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

这就是你要找的东西吗

于 2012-05-23T09:09:08.330 回答
0

您是在谈论让搜索图标位于输入#搜索之上吗？

比如这样：http: //jsfiddle.net/52YfE/？

于 2012-05-23T09:13:49.083 回答
0

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

于 2012-05-23T09:16:48.993 回答