div 没有显示在文本框上方答案

【问题标题】：div not showing above text boxdiv 没有显示在文本框上方
【发布时间】：2012-05-29 19:27:04
【问题描述】：

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

目前我的代码如下所示：

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

我怎么刷？

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用两者的相对位置来解决它。但只需更改它们的 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;}

这就是你要找的here

【讨论】：

如前所述，绝对定位搞砸了我的定位。
看，当我在它周围放置一个单独的 div 并从那里设置样式时它就可以工作，所以我并不是说它是错误的。仅使用当前布局，它并不能满足我的要求。感谢您的回答！我一直很感激！ :)

【解决方案2】：

您是说在 input#search 之上放置搜索图标吗？

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

【讨论】：

它在 Firefox 和 Chrome 上不起作用，因为 z-index 值为负。它仅适用于 Internet Explorer。 -1 表示它落后于 body 元素，因此无法获得焦点。您可以将两个元素 position 设置为 relative 并将更高的 z-index 值赋予 #search-icon 就像 @agriboz 的更新答案一样。
嘿@DarkRanger，Erkan 说得有道理。刚刚运行它，搜索框除了在 IE 中之外没有获得焦点。我很抱歉给出了一个不正确的答案（对定位不太熟悉，除了现在有点多了）。如果您愿意，只需将功劳转移到 agriboz，因为他更新了答案。他给出两个 div 的相对位置是正确的，然后是你想要的更高的 z-index。

【解决方案3】：

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

【讨论】：