如何让fixed定位的Footer覆盖背景并设置为非透明？

代码现状 #

HTML代码 #

<div className="App-footer-float">
  <div id="footer" className="App-footer">
    <Divider></Divider>
    <div>
      <Row justify="center" align="middle">
        <Col>
          <div>© 2022 Apple</div>
          <div>ICP 1700232-6</div>
        </Col>
      </Row>
    </div>
  </div>
</div>

原CSS代码 #

.App-footer-float{
  margin: 0 auto;
  width: 100%;
}

.App-footer{
  font-size: 0.3rem;
  position: fixed;
  bottom: 0;
  text-align: "center";
  width: 100%;
}

尝试过的操作 #

当前Footer为透明状态，想要让它覆盖页面背景并设置非透明，尝试在App-footer-float类中添加背景色：

.App-footer-float{
  margin: 0 auto;
  width: 100%;
  background-color:red;
}

同时调整过opacity及透明属性，但都没有效果。

解决方案 #

问题核心是fixed定位元素的层级特性：

• .App-footer设置了position: fixed，会脱离文档流，父元素.App-footer-float是普通文档流元素，它的背景无法延伸到fixed子元素的下方区域。
• 另外CSS里text-align: "center"的引号是错误写法，属性值不需要加引号，应改为text-align: center。

直接给fixed定位的.App-footer设置背景色即可解决，还可以加上z-index确保它在页面内容上方：

.App-footer-float{
  margin: 0 auto;
  width: 100%;
}

.App-footer{
  font-size: 0.3rem;
  position: fixed;
  bottom: 0;
  text-align: center; /* 修正引号问题 */
  width: 100%;
  background-color: #ffffff; /* 替换成你需要的背景色 */
  z-index: 100; /* 确保Footer覆盖在其他内容之上 */
  padding: 8px 0; /* 可选：增加内边距，避免内容紧贴底部边缘 */
}

如果一定要给父元素设置背景，需要把.App-footer-float也设置为position: fixed，但这种方案没必要，直接给.App-footer加背景是最简洁有效的方式。

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