多个div元素被底部fixed定位div重叠的技术问题咨询

这个问题其实挺常见的，核心原因是fixed定位的元素会完全脱离正常文档流——它不会在页面布局中占据任何空间，所以当页面内容滚动时，底部的fixed div就会直接“浮”在上方内容的上面，造成重叠。

针对你的情况，这里有两个实用的解决方案：

方案1：手动设置底部内边距（适合固定高度的fixed元素） #

首先给你的fixed元素明确设置高度（如果没设置的话），然后给页面的根容器（比如body）添加一个等于fixed元素高度的padding-bottom，这样就能给内容留出足够的底部空间，避免被覆盖。

修改后的CSS代码示例：

#div1 {
  position: fixed;
  background: blue;
  font-size: 50px;
  bottom: 0;
  left: 0;
  right: 0; /* 让元素铺满整个宽度，可选 */
  height: 60px; /* 根据字体大小和行高设置合适的高度 */
}

body {
  margin: 0; /* 清除默认边距，避免布局混乱 */
  padding-bottom: 60px; /* 值和fixed元素的高度保持一致 */
}

方案2：动态计算高度（适合高度不固定的fixed元素） #

如果你的fixed元素高度可能变化（比如内容换行、字体大小自适应），可以用JavaScript动态获取它的高度，然后设置给body的padding-bottom，这样更灵活：

// 页面加载完成后执行
window.addEventListener('load', function() {
  const fixedDiv = document.getElementById('div1');
  // 设置底部内边距为fixed元素的实际高度
  document.body.style.paddingBottom = fixedDiv.offsetHeight + 'px';
});

// 如果窗口大小变化可能影响fixed元素高度，也可以监听resize事件
window.addEventListener('resize', function() {
  const fixedDiv = document.getElementById('div1');
  document.body.style.paddingBottom = fixedDiv.offsetHeight + 'px';
});

这样不管fixed元素高度怎么变，页面内容都不会被它覆盖啦。

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