Question

好的，所以我首先要说这是我第一次使用HTML表单，所以我觉得我已经很好地研究了它们，但仍然没有找到任何人这个问题。

话虽如此，我一般也是HTML的业余爱好者，所以这可能只是另一个烦人的请检查我的代码问题。

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

＆＃13;

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;

}

＆＃13;

<!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>

＆＃13;

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

其形式在正确的位置。但是如果你运行我的代码，你会看到表单迁移到屏幕的左上角，除了箭头按钮外，它们变得不可见。我知道这与我的CSS有关，但我不确定是什么。

修改 --------------------------------------- -----------

JS-Fiddle here

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

Answer 1

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

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

我不能让我的表单正确定位，可能是CSS的问题

1 个答案: