html - 在图像上放置表单

Question

我有这个 html 用于放置在我网站顶部的图像（我正在处理本地文件，该网站还没有上线，只是先搞砸了）：

HTML：

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

CSS：

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

图像为3000X200 jpg 图像

我有一个表格，我想把它放在该图像的最右侧，图像的最右侧。

（表格）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;
}