在图像上放置表单答案

【问题标题】：Positioning a form over an image在图像上放置表单
【发布时间】：2014-02-13 11:56:25
【问题描述】：

我有这个 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 >

我该怎么做呢？

【问题讨论】：

将div的背景设置为图像，而不是使用img标签，然后将表单放入其中。
为此，我想您需要付出很多努力才能将所有元素设置到位。为什么不直接制作一个完整的表格，然后进行样式设置。
我非常赞同 JimJimmy1995 所说的话。
@AkshayKhandelwal 完整表格是什么意思？

标签： html css image forms positioning

【解决方案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;
 }

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

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

【讨论】：

对不起，我对此很陌生。什么是容器？顺便说一句，当我摆脱“左：0%”时，图像向右移动了大约 3 个像素左右。我将其设置为零以解决该问题。
只是某种 HTML 元素，它也可能是主体本身。您的图像上不需要position: absolute;。只需确保加载 reset-css 以消除不需要的浏览器格式。
我使用的位置：绝对；在我的图像上，这样我就可以将它排除在我所有其他代码之外。让我给你一张我网站的截图，这样你就可以看到我也在处理什么......
@SethUrquhart 每个浏览器都会在您对元素应用任何样式之前应用自己的 css。谷歌一下找到如何重置浏览器样式..

【解决方案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>

【讨论】：

都是css。 html 与问题中的相同，可在演示链接中查看。
@SethUrquhart 那是 Css。如果你不明白，我想你应该先通过w3schools.com/html/html_intro.asp和w3schools.com/css/css_intro.asp再在这里提问。我们建议您在请求他人帮助之前先进行一些研究。
表单是“id”还是“class”。抱歉，我了解基本的 css，我只是不确定表单是如何连接到 html 的？
form 是一个元素。您可以通过该代码将 css 样式应用于 form 的所有元素。如果它有这样的 id <form id="myform" > 你可以将 css 更改为 #myform 在这种情况下或 form#myform 或在你的情况下 #searchbox 我已经更新了我的答案以使用你的 id 因为你看起来更舒服.
对不起，我弄错了，图像是 3000X200。对不起，你帮了很多忙！

【解决方案3】：

除了使用img标签，更好的方法是将图片设置为表单的背景。

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

【讨论】：

这也是一个很好的解决方案，但您需要确保并设置表单的宽度和高度。
我不想这样做的唯一原因是我想让图像独立于表单。我希望表格与图像分开，而不是图像与表格分开。感谢您的建议！