相對位置與位置：絕對

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的圖標position:absolute 。 這樣，與跨度的絕對偏移實際上是頁面的相對偏移。

Answer 3

使用position：relative，並在輸入標簽中使用padding-left作為圖像寬度的量，不會有隱藏空間。

Answer 4

只需在圖像元素上使用負margin-left ，讓它顯示在輸入上方。