Html 将窗体放置在图像上

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

HTML:

该图像为3000X200jpg图像

我有一个表格，我想放在这个图像的正上方，在图像的最右边

（表格）HTML：

---

我该怎么做呢？

为什么要设置

位置：绝对如果你把它放在顶部，然后离开零位？是否有
位置为相对的容器

只需将表单设置为
位置：绝对并将其置于顶部和左侧
0

图像和表单都需要在同一个容器中，即：

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

另一个很好的选择是使用背景图像，正如评论中所建议的那样。在这种情况下，您不需要容器、定位或图像：

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

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

演示：

CSS:

HTML:


输入
与其使用img标记，不如将图像设置为表单的背景

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

将
div
的背景设置为图像，而不是使用
img
标记，然后将表单放入其中。要做到这一点，您需要花费大量的努力才能将所有元素设置到位。为什么不做一个完整的表格，然后设计它的样式。我非常赞同JimJimmy1995所说的。@AkshayKhandelwal你说的完整表格是什么意思？对不起，我对这个很陌生。什么是容器？顺便说一句，当我去掉“left:0%”时，图像向右移动了大约3个像素。为了解决这个问题，我将它设置为零。只是某种HTML元素，它也可能是主体本身。您并不需要
位置：绝对在您的图像上。只需确保加载一个以平衡不需要的浏览器格式；在我的图像上，这样我就可以将它排除在所有其他代码之外。让我给你一个我的网站的截图，这样你就可以看到我也在处理什么…@SethUrquhart每个浏览器在你对元素应用任何样式之前都会应用它自己的css。用谷歌搜索一下如何重新设置浏览器样式。这都是css。html与问题中的html相同，可在演示链接中查看。@SethUrquhart，即Css。如果你不明白这一点，我想在这里提问之前，你应该先看一遍。我们建议您在请求他人帮助之前做一些研究。表格是“id”还是“类”。抱歉，我理解基本的css，我只是不确定表单是如何连接到html的？
form
是一个元素。您可以将css样式应用于由该代码构成的所有元素。如果它有这样一个id
，你可以将css改为
#myform
，在这种情况下，或者
form#myform
或者在你的情况下
#searchbox
我已经更新了我的答案，以使用你的id，因为你似乎对此比较满意。很抱歉我犯了一个错误，图像是3000X200。对不起，你帮了大忙！这也是一个很好的解决方案，但您需要确保并设置表单的宽度和高度。我不想这样做的唯一原因是我希望图像与表单独立。我希望形式是图像的一部分，而不是图像是形式的一部分。谢谢你的建议！
<div id="container">
    <img/>
    <form></form>
</div>

 #container {
     position: relative;
 }

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

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

#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}
*/

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

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

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