在图像上放置输入文本表单并提交按钮答案

【问题标题】：Position input text form and submit button over an image在图像上放置输入文本表单并提交按钮
【发布时间】：2013-10-29 18:59:52
【问题描述】：

我正在尝试在图像顶部添加和定位输入文本表单和提交按钮（而不是背景图像，commentpaper.jpg），并且遇到了很多困难。到目前为止，这就是我的 html 页面中的内容。

我是 Html 和 Css 的新手，所以最简单的方法可能是甜蜜的！提前感谢您的帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Have Your Say</title>
    <meta name="description" content="Have Your Say.">
    <meta name="keywords" content="Have Your Say, Comments">
    <link rel="stylesheet" href="style.css">
    <img src="commentpaper.jpg" alt="header" width="1050" height="600">
</head>
<body>
    <div id="wrapper">
        <div id="header">
    </div>
    <div id="nava">
        <ul id="navlist">
            <li><a href="Index.html">Home</a></li> 
            <li><a href="Quiz.html">Weird Stuff</a></li>
            <li><a href="Comments.html">Have Your Say</a></li>
        </ul>
    </div>
    <center>
        <form action="" method="GET">
            <textarea name="comments" rows="10" wrap="hard"></textarea>
            <input name="redirect" type="hidden" value="index.html">
            <input name="next_url" type="hidden" value="index.html">
            <br>
            <input type="submit" value="Send">
            <input type="reset" value="Clear">
        </form>
    </center>
</body>
</html>

【问题讨论】：

我想你错过了head , body标签
为了快速响应创建小提琴
您需要向我们展示您的 CSS。另外，img 在您文档的 head 中做什么？
制作一个快速回答的小提琴。
你不应该在head 标签中有img 标签。

标签： html css

【解决方案1】：

您可以通过将图像包装在具有 position: relative; 的 DIV 中并将表单绝对定位在包装器中来做到这一点：

您可以通过将像素值添加到 top、bottom、right 和 left CSS 属性来更改表单的位置，例如top: 50px;

请参考JsFiddle。

HTML：

<div id="wrapper">
    <div id="header">
</div>
<div id="nava">
    <ul id="navlist">
        <li><a href="Index.html">Home</a></li> 
        <li><a href="Quiz.html">Weird Stuff</a></li>
        <li><a href="Comments.html">Have Your Say</a></li>
    </ul>
</div>
<div class="form-holder">
    <img src="commentpaper.jpg" alt="header" width="1050" height="600">
    <form action="" method="GET">
        <textarea name="comments" rows="10" wrap="hard"></textarea>
        <input name="redirect" type="hidden" value="index.html">
        <input name="next_url" type="hidden" value="index.html">
        <br>
        <input type="submit" value="Send">
        <input type="reset" value="Clear">
    </form>
</div>

CSS：

形式 { 位置：绝对；顶部：0； } .form-holder { 位置：相对； }

另请注意，<center> 元素在 HTML 4.01 中已弃用。您应该在适当的情况下使用带有类或 <section> / <article> 标记的 DIV。

【讨论】：

感谢您的帮助，我们会注意标签！

【解决方案2】：

添加一个div：

<div id="absolute">
    <center><form>
    <textarea name="comments" rows="10" wrap="hard">
            </textarea>
            <input name="redirect" type="hidden" value="index.html">
            <input name="next_url" type="hidden" value="index.html">
            <br>
            <input type="submit" value="Send">
            <input type="reset" value="Clear">
            </form>
  </center>
  </div>

CSS : 我在 div (form) 上放置了一个绝对位置

#absolute {
 position: absolute;
top: 50px;
left: 50%;
margin-left:-250px;
width: 500px; 
}

【讨论】：