Html 为什么按钮的位置会影响列表的位置？

我正在使用html和css制作一个网页，我在页面底部放置了一个水平列表，但当我在页面中心添加一个按钮时，它会将列表进一步向下推

.navigation{
最大宽度：700px；
保证金：0自动；
利润上限：700px；
}
.导航ul{
列表样式：无；
显示：表格；
宽度：100%；
}
李国宝先生{
显示：表格单元格；
文本对齐：居中；
}
.ul li a{
填充物：5px 5px；
宽度：100%；
字体系列：“calibri”；
}
.按钮{
-moz盒阴影：插入0px 0px 0px 0px#fce2c1；
-网络工具包盒阴影：插图0px 0px 0px 0px#fce2c1；
方框阴影：插入0px 0px 0px 0px#fce2c1；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#FF9933）、颜色停止（1，#fb9e25））；
背景：-莫兹线性梯度（中心顶部，#FF9933 5%，#fb9e25 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#FF9933'，endColorstr='#fb9e25'）；
背景色：#FF9933；
-webkit边框左上半径：0px；
-左上角moz边界半径：0px；
边框左上半径：0px；
-webkit边框右上角半径：0px；
-moz边框半径右上角：0px；
边框右上角半径：0px；
-webkit边框右下半径：0px；
-moz边框半径右下角：0px；
边框右下半径：0px；
-webkit边框左下半径：0px；
-moz边框半径左下角：0px；
边框左下半径：0px；
文本缩进：0px；
显示：内联块；
颜色：#00000；
字体系列：Arial；
字体大小：35px；
字体大小：粗体；
字体风格：普通；
高度：90px；
线高：100px；
宽度：500px；
文字装饰：无；
文本对齐：居中；
文本阴影：1px 1px 0px#cc9f52；
左边距：550px；
边缘顶部：300px；
}

网站

您的类导航具有页边距顶部：700px，这意味着它希望将自身定位在您要添加的按钮下方700px。因此，当页面为空时，您的导航将定位在屏幕顶部下方700px处（因为屏幕上没有其他元素），但当引入按钮时，您的导航将定位在屏幕顶部下方700px处

我猜你正在寻找一个“粘性页脚”（导航将出现在空屏幕的底部，但如果你有一个充满内容的页面，则需要向下滚动），或者可能是一个固定位置的页脚（始终位于屏幕底部）

要实现固定页脚，可以按如下方式更改导航类：

.navigation {
    max-width: 700px;
    margin: 0 auto;
    bottom: 0;
    position:absolute;
}

bottom:0表示您希望导航距离屏幕底部为0px<代码>位置：固定

告诉元素使用浏览器窗口而不是其他元素（如按钮）定位自身

---

请在此查看，将导航边距顶部的值更改为200px或以下

---

---

@zigg76如果你的目标是一个粘性页脚，你可以使用下面的css，并编辑它一点你的满意

.myfooter
  {
   position:fixed;
   bottom:0;
  }

---

谢谢，但是如果不使用margintop:700px，我如何确定屏幕底部的位置呢？我用一个例子更新了答案。关键的一点是，如果您使用的是边距顶部，它将自身相对于其上方的元素进行定位。

.myfooter
  {
   position:fixed;
   bottom:0;
  }