Positioning on top of a input text field?

I want to position .select-delete on top of the <input> text field. I did this once before, but alas I lost the code, and I'm pretty sure the surrounding elements CSS properties wer开发者_Python百科e different.

Here's a link to my JS fiddle, so that you can edit/see what I'm talking about: http://jsfiddle.net/gPF8X/

I've tried a negative margin-top but it's sent to the back of and hidden behind the text field. I've also tried to set float which alone with altering margin settings, which had the same effect.

Any edits/answers that have the desired effect would be greatly appreciated!

---

http://jsfiddle.net/gPF8X/2/

Like this:

I set the position of the #box to relative.

then set the position of the .select-delete box to absolute

CSS

#box {
    margin: 20px auto 20px;
    background: #fff;
    width: 460px;
    padding: 20px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
    color: #444;
    position:relative;
}
.select-delete {
    margin-left: 430px;
    margin-top: 0px;
    background: url(http://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif) no-repeat;
    height: 16px;
    width: 16px;
    position:absolute;
    top:40px;

}