Question

I have a <input /> field and an <a><img /></a> icon which I want to put inside the input.

Of course I can’t put an image inside of the input since it’s not that kind of tag, but I’d be happy with it just overlapping.

If I use position: relative (which makes positioning it correctly easy) the icon continues to take up invisible space where it would have been.

If I use position: absolute I cannot position the icon relative to its previous sibling, the positioning values are in relation to the parent, which is not great because different browsers render the <input> with different sizes.

Is there a workaround for this?

Answer 1

http://jsfiddle.net/iambriansreed/u7DUv/

Wrap the input and a in a wrapper and absolutely position the a off the relatively positioned div wrapper.

CSS

input {
    font-size: 24px;
    width: 200px;
}
div { 
    position: relative;
    width: 200px;
}
div a {
    display: block;
    position: absolute;
    top: 4px;
    right: 0;
    z-index:99;
}