I want to show a search icon over the start of the a text input box.

Currently my code looks like this:

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

```

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

```

It shows the div right where I want it, but below the actual text box. When I change the search icon position to absolute, it screws up my positioning.

How do I swop it?