CSS页脚与上方内容重叠故障排查，附相关HTML、CSS代码

问题根因 #

• HTML结构顺序错误：当前代码将页脚.downstuff放在了商品列表模块.product-main的上方，正常文档流中后加载的元素层级更高，若商品列表存在浮动、定位属性，会直接覆盖在页脚区域
• 若页脚使用了固定定位，或商品列表子元素浮动导致父级高度塌陷，也会引发重叠问题

修复步骤 #

1. 调整HTML结构顺序 #

将页脚模块移动到商品列表模块的末尾，正确结构如下：

<section class="product-main">
  <!-- 原有所有商品卡片代码保持不变 -->
  <div class="product-card">
    <img src="images/Prince Krish Sofa-set Ash.jpg" alt="Prince Krish" class="product-img">
    <h1><a href="princekrish.html">Prince Krish Sofa-Set<a></h1>
    <p class="price">₹10000</p>
    <p>Prince Krish Sofa Set is made out of premium Jute fabric, Venga wood base and  Kurl-on foams</p>
    <p><button class="btn-cart">Add to Cart</button></p>
  </div>
  <!-- 剩余8个商品卡片代码保留 -->
</section>

<!-- 页脚调整到商品列表之后 -->
<div class="downstuff">
  <p>Copyright © 2021 Oaknoak | Branded Furniture</p>
  <p>Manufacturer | Chennai</p>
</div>

2. 补充CSS属性处理特殊场景 #

如果调整结构后仍存在重叠，根据实际场景添加对应样式：

场景1：商品卡片使用浮动导致父元素高度塌陷

给商品列表模块添加清除浮动属性：

.product-main {
  overflow: hidden;
  padding-bottom: 20px; /* 可自定义数值，用于和页脚留出空隙 */
}

场景2：页脚使用了position: fixed固定在页面底部

给商品列表添加底部外边距避让固定页脚，同时补全页脚的宽度属性：

/* 商品列表底部避让高度要大于页脚实际高度 */
.product-main {
  margin-bottom: 80px;
}

.downstuff{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%; /* 固定定位元素需手动设置占满全屏宽度 */
  /* 原有属性保持不变 */
  padding: .3em;
  color: #e9e9e9;
  background: #242424;
  text-align: end;
}

完成以上调整后刷新页面即可解决重叠问题。

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