与位置的相对定位:绝对

Relative positioning with position:absolute

本文关键字：绝对 定位 相对 位置      更新时间：2023-09-26

我有一个<input />字段和一个<a><img /></a>图标，我想把它放在输入中。

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

如果我使用position: relative（这使得正确定位变得容易），图标会继续占用原本不可见的空间。

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

有解决方法吗？

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

我想我现在知道该怎么做了。我在图标所在的位置做了一个<span>，它将具有没有偏移的position:relative，并且它将包含带有position:absolute的图标。这样，与范围的绝对偏移量实际上是页面的相对偏移量。

使用位置：相对，并使用左填充作为输入标签中图像宽度的数量，不会有隐藏空间。

只需在图像元素上使用负margin-left，使其显示在输入上方。

相关文章：