我无法让我的表单正确定位，可能是 CSS 的问题答案

【问题标题】：I can't get my form to position right, probably an issue with CSS我无法让我的表单正确定位，可能是 CSS 的问题
【发布时间】：2016-05-24 19:28:15
【问题描述】：

好的，所以我首先要说这是我第一次使用 HTML 表单，所以我认为我已经对它们进行了很好的研究，但仍然没有发现有这个问题的人。

话虽如此，我也是 HTML 的业余爱好者，所以这可能只是另一个烦人的 please-check-my-code 问题。

我有一个包含以下代码的网页：

body {

	margin: 0px;

}

.main-header {

	margin-top: 0px;

}

.wrapper {

	margin: 0px;
	width: 100%;
	height: 1000px;

}

.header {


	background-color: #0FADD1;
	width: 100%;
	height: 200px;

}

.description {

	position: absolute;
	margin: auto;
	width: 100%;
	height: 100%;
	background-color: #0FADD1;

}

h1, h2, h3, h4, p {

	font-family: Arial, sans-serif;

}

h1 {

	font-size: 4em;
}

.save-heading, .save-paragraph, .save-heading-two{

	text-align: center;
	color: white;

}

.save-heading-two {

	margin-top: 100px;
	margin-bottom: 0px;

}

.save-paragraph {

	margin-top: 100px;

}

.calculator {

	background-color: #0E9CC0;
	height: 500px;

}

.calc {

	background-color: white;

}

<!DOCTYPE html>

	<html>

		<head>

			<title>Helyos Co.</title>

			<!-- Fonts -->
			<link href='https://fonts.googleapis.com/css?family=Roboto:400,100' rel='stylesheet' type='text/css'>

			<link rel='stylesheet' type='text/css' href='css/jquery-ui.css'/>
			<link rel='stylesheet' type='text/css' href='css/stylesheet.css'>
			

		</head>

		<body>
			
			<div class='wrapper'>

				<div class='header'>
					
					<!-- TODO: Stuff here? -->

				</div>

				<div class='description'>

					<h1 class='save-heading'>You could save ##$ a year <br> by switching one bulb.</h1>
					<p class='save-paragraph'>Now multiply that times the average<br>number of lightbulbs in a home.<br>And remember, air conditioning makes a
					<br> difference. Also, how many kilowatts do you use?<br>You know what?</p>
					<h2 class='save-heading-two'>Just use our Handy Dandy Calculator to do it for you</p>

				</div>

				<div class='calculator'>

					<form class='calc-form'>
						
						<input type='number' class='calc' name='watt-hours' placeholder='Enter a number'/>

					</form>

				</div>

			</div>

			<script type='text/javascript' charset='UTF-8' src='js/jquery-ui.js'></script>
			<script type='text/javascript' charset='UTF-8' src='js/jquery-2.2.0.js'></script>
			<script type='text/javascript' src='js/script.js'></script>

		</body>

	</html>

在我添加 CSS 之前，它看起来像这样：

在正确的位置有表格。但是，如果您运行我的代码，您会看到表单迁移到屏幕的左上角，并且除了箭头按钮之外变得不可见。我知道这与我的 CSS 有关，但我不确定。

编辑---------------------------------------- ------------

JS-小提琴here

编辑 2---------------------------------- ----------

【问题讨论】：

你能提供一个小提琴吗
是的，我会编辑帖子。
这里是fiddle.. 没有得到你的问题..你能解释清楚一点吗..
Fiddle 现在包含在答案的底部
我认为代码运行良好

标签： html css forms input styles

【解决方案1】：

首先，感谢您提供大量信息并提出意见 - 对您有很大帮助。话虽如此，我不确定问题出在哪里，但看起来有些内容被覆盖了。我有一个很好的猜测是什么把你搞砸了。您正在制作 .description 类 position:absolute，这对渲染进行了重大更改。您可以将绝对定位视为从网页的正常流程中删除该元素并将其粘贴到页面顶部您指定的位置。换句话说，如果您将它放在页面上的其他内容上，则该其他项目将被隐藏。它对于模式和弹出窗口以及应该涵盖其他内容的事物非常有用。对于正常的网络流程，您通常不会使用绝对（当然有很多例外）。

当我将您的 position:absolute 更改为 position:relative 时，我可以看到您的表单等。如果您正在尝试完成需要绝对的事情，也许您可以在问题中指定该目标。

【讨论】：