html - 插入表格时移动按钮

Question

这是我的 Html 中的按钮:

<div id="Home">
<FORM>
<INPUT Type="BUTTON" Value="Home" Onclick="window.location.href='NBA.htm'"> 
</FORM>
</div>

这是我在 CSS 中给它的定位:

#Home {
position:absolute;
transition: .5s ease;
top: 0px;
left: 0px;
right: -420px;
bottom: -191px;
}

一切正常，但是一旦我添加了一个带边框的表格，一切都搞砸了:(

没有表格，按钮就像我想要的那样位于页面的左上角，但是当我添加一个带边框的表格时，按钮移动到我的文本字段的顶部......

我的 CSS 文本:

#Text {
position: absolute;
background-image: url("http://support.leagueapps.com/customer/portal/attachments/28383");
color: #3399ff;
border-color: Lightblue;
border-style: double;
border-width: 5px;
top: 160px;
left: 150px;
height: 1500px;
width: 900px;
font-size: 13pt;
font-family: Franklin Gothic Medium;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
box-shadow: 10px 10px 10px grey;
border-radius: 20px;
}

关于如何阻止我的 Button 移动但仍然能够制作带边框的表格的任何想法......？

Answer 1

你的意思是这样的吗？

.main button {
position: fixed;
top: 0;
left: 0;
transition: .5s ease;
}
table td {
border: 2px solid #000;
}

<div class="main">
  <form>
    <button type="submit">Home</button>
  </form>
</div>
<br/>
<table>
  <tr>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
  </tr>
  <tr>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
    <td>Blah</td>
  </tr>