我已經在這個網站上有一些很好的幫助，所以當我遇到問題時，Stack Overflow當然是我的第一個通話端口！相對圖像響應式網頁設計
我下載了一個響應式網站模板，並做出了更改的LOADS。我非常完整;不過，我還有一個問題。
我在我的網站頂部創建了一個登錄表單，在另一個SO用戶的幫助下，我創建了可點擊的相對圖像。問題是，當網站顯示的屏幕變得小於479px時，相對圖像看起來並不是他們應該在的地方。
我已經上傳了網站HERE，並希望在解決問題方面提供任何幫助。
您的圖像相對於窗體或包裝div的位置。他們應該相對於定位於輸入，或包裹的div的投入，如：
<form name="" action="" method="">
<div style="position: relative; overflow: auto; display: inline-block;">
<img title="Forgotten Your Username?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_1">
<input type="text" value="E-Mail Address" onBlur="if(this.value=='') this.value='E-Mail Address';" onFocus="if(this.value=='E-Mail Address') this.value='';" id="login">
<div style="position: relative; overflow: auto; display: inline-block;">
<img title="Forgotten Your Password?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_2">
<input type="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';" id="login">
</div>
<input type="submit" style="margin-left:-35px;" class="general_button" value="Log In" name="submit">
如果你這樣做，然後把這個在你的登錄按鈕...
display: inline-block;
margin-left: 0;
vertical-align: top;
事情看起來不錯。
另一個說明...一定不要打開你的問號按鈕鏈接的新窗口。您通常不想破壞正常的瀏覽器功能並以此流動。另外，考慮使用jQuery的佔位符插件來簡化，而不是你的內聯JS。
謝謝。這似乎是最好的！ 我使用谷歌瀏覽器作爲我的默認瀏覽器，一切都看起來很完美。然後，我在IE，Opera，FireFox，Safari中打開這個網站 - 他們都顯示滾動條，圖像是。任何想法？ –
我在Firefox中開發，沒有看到滾動條，但也許嘗試溢出：隱藏，或尋找你溢出和修復它。 – isherwood
我會試着解釋爲什麼會發生這種情況，而不僅僅是給你完成的代碼。
所以，當你使用position：relative;您將元素相對於其父元素進行定位。 在.forgotten_2圖片上，您使用的是right：226px;並且以這種方式將其從其父（the）的右邊緣定位爲226px。
現在，當表格分成兩行時，這種定位並不好。
你應該使用什麼：
正如我看到你需要指向「忘記...」的鏈接，所以你應該可以採用第二種解決方案。這就是你的HTML應該如何：
<form method="" action="" name="">
<div class="input-box">
<img class="forgotten_1" src="http://www.razorrobotics.com/images/question-mark.gif" onclick="open_win()" title="Forgotten Your Username?">
<input type="text" id="login" onfocus="if(this.value=='E-Mail Address') this.value='';" onblur="if(this.value=='') this.value='E-Mail Address';" value="E-Mail Address">
</div>
<div class="input-box">
<img class="forgotten_2" src="http://www.razorrobotics.com/images/question-mark.gif" onclick="open_win()" title="Forgotten Your Password?">
<input type="password" id="login" onfocus="if(this.value=='Password') this.value='';" onblur="if(this.value=='') this.value='Password';" value="Password">
</div>
<input type="submit" name="submit" value="Log In" class="general_button" style="margin-left:-35px;">
</form>
現在你會添加一些CSS的輸入框。請注意，block_login（表單的父級）有float：right;這可能會干擾你的造型;）
蝙蝠的權利，不應該指多個元素相同的ID。兩個字段都有#login的ID。您應該最有可能將其改爲.login類。
對我而言，第一場中的圖像落在與第二場中不同的位置。
由於您在視口更改時沒有更改字段的大小，因此我建議您移動到div（使用position：relative set）以包含每個字段。將輸入寬度和高度設置爲100％，然後使用頂部和右側將圖像絕對放置，使其位於輸入的末尾。
請把需要的信息複製到問題本身。通過將其置於外部鏈接中，如果該網站發生更改，問題可能會變得不實，使未來的訪問者無法使用您的問題。 –