將圖像定位在圖像上

我已經將圖像放置在我的網站頂部（我正在關閉本地文件，網站尚未生效，只是在第一個圖像周圍）：將圖像定位在圖像上

HTML：

<img id="top-header" src="images/top_header.jpg">

CSS：

#top-header { 
    position: absolute; 
    left: 0%; 
    top: 0; 
}

的圖像是一個3000X200 jpg圖片

我有一張表格，我想把它放在圖片的最上面，放在圖片的最右邊。

（FORM）HTML：

<form id="searchbox" action="" method="get"> 
<input >

enter image description here

我怎麼會去這樣做呢？

來源

2013-04-15 Seth Urquhart

將'div'的背景設置爲圖像而不是使用'img'標籤，然後在其中放置表單。 –

這樣做，我覺得它會花費很大的努力爲您設置所有元素。爲什麼不只是做一個完整的形式，然後去造型。 –

我非常喜歡JimJimmy1995說的話。 – Sean

你可以做同樣的只是改變左到您希望它加載的形式。

演示：http://jsfiddle.net/lucuma/vV2ce/

CSS：

#top-header { 
    position: absolute; 
    left: 0%; 
    top: 0; 
} 

#searchbox { 
    position:absolute; 
    left: 1200px; 
    display:inline-block; 
    z-index:10 
} 

/* in my example #searchbox and form are the same so this depends on your overall ' 
    implementation 

    form {position:absolute; left: 1200px;display:inline-block;z-index:10} 
*/

HTML：

<img id="top-header" src="http://placehold.it/1440x200"> 

<form id="searchbox" action="" method="get"> 
    Input <input type="text" /> 
</form>

來源

2013-04-15 19:43:41 lucuma

什麼是代碼的底部？ HTML？ CSS？ –

這是所有的CSS。 html與問題中的相同，並在演示鏈接中可查看。 – lucuma

@SethUrquhart這是Css。如果你不明白這一點，我想你應該首先通過http://www.w3schools.com/html/html_intro.asp和http://www.w3schools.com/css/css_intro.asp，然後在這裏提問。我們建議你在請別人幫忙之前做一些調查。 –

爲什麼你設置position: absolute;如果你只是把它放在頂部並且保持零點？有容器position: relative;？

只需將表格設置爲position: absolute;並將其放在頂部並將其左移至0即可。

兩個，圖像和表格需要在同一容器中，即：

<div id="container"> 
    <img/> 
    <form></form> 
</div>

與CSS：

#container { 
    position: relative; 
} 

form { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

另一個非常好的替代方法是使用一個背景 - 圖像，如評論中所建議的那樣。在這種情況下，你不會需要一個容器或定位或圖像：

form { 
    background: #FFF url('path/to/image') no-repeat top left; 
}

來源

2013-04-15 19:42:24 nirazul

對不起，我對此很新。什麼是容器？順便說一句，當我擺脫了'左：0％'圖像右移約3像素左右。我將它設置爲零來解決這個問題。 –

只是某種HTML元素，它也可能是身體本身。你的圖片上並不需要「絕對位置」。只需確保加載一個[reset-css]（http://meyerweb.com/eric/tools/css/reset/）即可取出不需要的瀏覽器格式。 – nirazul

我用過的位置：絕對;在我的圖片上，所以我可以保留它的所有其他代碼。讓我給你一個我的網站的截圖，這樣你就可以看到我也在處理什麼... –

而不是使用img標籤，更好的辦法是將圖像設置爲窗體的背景。

form { 
    background: url('imagepath.png') no-repeat 0 0; 
    text-align: right; 
}

來源

2013-04-15 19:49:55 carmina

這也是一個很好的解決方案，但你需要確保並設置窗體的寬度和高度。 – lucuma

我不想這樣做的唯一原因是我想讓圖像獨立於形式。我希望表格能夠與圖像分開，而不是表格中的圖像。感謝您的建議！ –

將圖像定位在圖像上

回答

相關問題