javascript - 位置:absolute的相对定位

Question

我有一个 <input />场和一个<a><img /></a>我想放在输入中的图标。

当然，我不能将图像放入输入中，因为它不是那种标签，但我很乐意将其重叠。

如果我使用 position: relative (这使得正确定位变得容易)图标继续占据它本来应该在的地方的不可见空间。

如果我使用 position: absolute我无法相对于其前一个兄弟定位图标，定位值与父级相关，这不是很好，因为不同的浏览器呈现 <input>有不同的尺寸。

有解决办法吗？

Answer 1

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

将 input 和 a 包装在包装器中，并将 a 绝对定位在相对定位的 div 包装器之外.

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