如何用CSS实现绝对定位元素不遮挡页脚且父元素高度适配？

要实现absolute-child悬浮在header上方、不遮挡footer且适配动态高度的需求，核心是让容器能感知到动态元素的高度，避免footer因绝对定位元素脱离文档流而被遮挡。下面是纯CSS的可行方案：

解决方案原理 #

使用CSS Grid布局，将header和absolute-child放在同一网格行中，网格行的高度会自动适配两者中最高元素的高度（也就是动态变化的absolute-child），footer则自动排在下一行，彻底避免遮挡问题。

修改后的代码 #

CSS部分 #

body,
html {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
}

header {
  background-color: violet;
  height: 20rem;
  grid-row: 1;
  grid-column: 1;
}

.absolute-child {
  background-color: aquamarine;
  grid-row: 1;
  grid-column: 1;
  margin-top: 3.5rem; /* 替代绝对定位的top，实现悬浮效果 */
  width: 90%;
  padding: 1rem;
  /* 移除固定height，让内容自动撑开高度 */
}

footer {
  background-color: lightcoral;
  text-align: center;
  padding: 1rem;
  grid-row: 2;
  grid-column: 1;
}

React组件代码（无需修改） #

function App() {
  return (
    <div className="container">
      <header>
        <h1>Header</h1>
      </header>

      <div className="absolute-child">
        Absolute child with dynamic content. .
      </div>

      <footer>
        <h2>Footer</h2>
      </footer>
    </div>
  );
}

方案说明 #

1. 给容器添加display: grid，启用网格布局后，可将多个元素叠加在同一网格区域。
2. 将header和absolute-child指定到同一行（grid-row:1）和同一列（grid-column:1），实现层叠效果。
3. 用margin-top替代原有的绝对定位top属性，既实现悬浮在header上方的视觉效果，又让元素保留在文档流中，网格行的高度会自动适配其动态变化的高度。
4. footer指定到第二行（grid-row:2），会自动排在第一行的下方，不会被上方的元素遮挡。

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