div не отображается над текстовым полем

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

Это показывает право Див, где я хочу его, но ниже фактическое текстовое поле. Когда я меняю положение значка поиска на абсолютное, он закручивает мое позиционирование.

Как это сделать?

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

Вы говорите о том, Поисково значок находясь на вершине входного # поиска?

Такие как: http://jsfiddle.net/52YfE/?

Answer 3

Я не знаю, что вы хотите точно, но проверить это это один http://jsfiddle.net/V8AZE/