将表单放在图像上

Question

我有这个html用于放置在我网站顶部的图像（我正在处理本地文件，网站尚未生效，只是先乱搞）：

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 >

我将如何做到这一点？

Answer 1

如果你只是将它置于顶部和左侧零，为什么设置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;
}

Answer 2

您可以对表单执行相同的操作，只需将左侧更改为要加载的位置即可。

演示：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>

Answer 3

更好的方法是将图像设置为表单的背景，而不是使用img标记。

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