How to move img src a few pixels down on an html page

Question

I found a way to make my own user control of file uploads by putting fake control over it, and when I click fake, I actually click the real control below.

In any case, the image for the browse button is slightly up.

How can I lower it a bit?

Here is the js fiddle.

Jsfiddle

Here is the html and css:

    <div>
    <div class="fileinputs">
        <input type="file" class="file" />
        <div class="fakefile">
            <input />
            <img src="search.jpg" />
        </div>
    </div>
</div>

div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}

Answer 1

I believe that this is what you are looking for. jsFiddle

CSS

.moveimage
{
    position: relative;
    top: 3px;
}

Modified HTML

<img class="moveimage" src="search.jpg" />