使用CSS绝对定位的页脚遮挡页面正文内容的原因是什么？

问题修复方案 #

1. 修复根元素高度继承问题 #

absolute定位的百分比基准、body的min-height: 100%都需要基于html元素的高度声明生效，先给html添加高度规则：

html {
  height: 100%;
}

2. 调整body样式避免内容被页脚遮挡 #

绝对定位的页脚会脱离文档流，不会占据文档高度，需要给body预留底部padding，同时设置relative让页脚的定位基准为body而非全局视口：

body {
  background-image: url("bg.jpg");
  background-repeat: repeat;
  background-position: center;
  background-size: 100%;
  background-attachment: fixed;
  margin: 0;
  /* 预留底部空间，数值等于你的页脚高度，可根据实际效果调整 */
  padding-bottom: 120px;
  min-height: 100%;
  max-width: 1600px;
  /* 设为定位上下文 */
  position: relative;
}

3. 修复HTML结构错误 #

你把<h1 class="hlavní_nadpis">写在了<head>标签内，属于非法结构，会导致页面渲染异常，需要把这个h1标签移到<body>的最开头位置。

4. 移除无效CSS属性 #

你的所有文本类样式里的text-align: block是无效属性，text-align仅支持left/right/center/justify等值，block是display属性的取值，你可以直接删掉这些无效的text-align: block声明，不会影响现有布局。

完成以上修改后，绝对定位的页脚就能实现：页面内容不足一屏时贴在视口底部，页面内容超过一屏时跟随在所有内容的底部，不会遮挡正文内容。

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