相对位置与位置：绝对

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

Answer 2

我想我现在知道该怎么做了。我创建了一个<span>我的图标，它将position:relative没有偏移量，它将包含position:absolute的图标。这样，与跨度的绝对偏移实际上是页面的相对偏移。

Answer 3

使用position：relative，并使用padding-left作为输入标签中图像宽度的数量，不会有隐藏空间。

Answer 4

只需在图片元素上使用否定margin-left即可让它显示在输入上方。