无法设置页脚元素与页面底部间距，CSS定位异常求助

我要做一个包含多个元素的footer组件，各元素的定位参数如下：

• 第一个元素：

  left: 944px;
  top: 9749px;
  

• 第二个元素：

  left: 715px;
  top: 9819px;
  

• 第三个元素：

  left: 718px;
  top: 9852px;
  

• 第四个（最后一个）元素：

  left: 705px;
  top: 9999px;
  

我给最后一个元素额外设置了：

bottom: 93px;

但实际效果是这个元素紧贴页面底部，就像设置了bottom:0px一样。我没有对页面/body的高度做任何限制，请问这是页面高度导致的问题吗？

这确实是页面高度相关的问题，核心原因在于绝对定位元素的bottom属性依赖于父容器的高度基准，而你当前的页面/body没有形成有效的高度上下文：

1. 当未给html和body设置高度时，它们的高度默认由内容撑开。如果页面内容的实际高度小于浏览器视口高度，body的高度只会等于内容高度，而非撑满视口。
2. 你给最后一个元素设置的top:9999px，这个值大概率远超当前页面内容的实际高度，导致元素被推到页面最底部区域。此时设置bottom:93px时，由于父容器（body/html）的高度未覆盖到该元素所在位置，浏览器会以视口底部为基准，视觉上就呈现出bottom:0的效果。

解决思路 #

• 先让html和body撑满视口，建立有效的高度基准：

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  

• 避免同时给绝对定位元素设置top和bottom（除非需要拉伸元素高度）。如果要让最后一个元素距离底部93px，直接移除top:9999px，只保留bottom:93px和left:705px即可。
• 建议将所有footer元素放入统一的父容器，给父容器设置position: absolute; bottom:93px;，内部元素用相对或绝对定位调整位置，这样更易维护，也能避免定位冲突。

内容的提问来源于stack exchange，提问作者Bhavani