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/