我的表格无法正确定位，可能是 CSS 的问题

Question

好的，所以我首先要说这是我第一次使用 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-Fiddlehere

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

Answer 1

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

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

我的表格无法正确定位，可能是 CSS 的问题

I can't get my form to position right, probably an issue with CSS

html

css

forms

styles

input