Question

尝试添加和定位输入文本表单并在图像顶部提交按钮（不是在背景图像上，使用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>

Answer 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：

form {
    position: absolute;
    top: 0;
}
.form-holder {
    position: relative; 
}

另请注意，HTML 4.01中不推荐使用<center>元素。您应该在适当的时候使用带有类的DIV或<section> / <article>标记。

Answer 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（表单）

上放置了一个绝对位置

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

将输入文本表单和提交按钮放在图像上

2 个答案: