如何用CSS Grid将元素放置在现有容器上层且无需反复调试定位参数

最优实现方案 #

推荐直接利用Grid布局本身的层级叠加特性实现，不需要手动调试定位参数，完全自适应组件高度变化，操作如下：

修改步骤 #

1. 调整HTML结构，将.cookie-consent元素挪到.container容器内部，放在#component2和footer之间即可
2. 替换.cookie-consent的CSS样式如下：

.cookie-consent {
  /* 占满整个grid的横向宽度，纵向覆盖component2所在行和footer所在行的区域 */
  grid-area: 3 / 1 / 5 / -1;
  /* 垂直对齐到component2行的底部，刚好落在component2和footer的间隙位置 */
  align-self: end;
  /* 水平对齐方式按需调整：start靠左/center居中/end靠右 */
  justify-self: start;
  background: red;
  width: 100px;
  height: 80px;
  z-index: 20;
}

方案优势 #

• 不需要手动调试top/left等定位参数，component2高度变化时会自动适配位置
• 完全不会影响原有Grid布局的行列结构，也不会挤占其他组件的占位空间
• 对齐方式调整灵活，只需要修改justify-self和align-self就能快速切换位置

可选方案（不修改HTML结构） #

如果你不想调整原有HTML的元素顺序，可以给body添加相对定位，再结合CSS calc()动态计算位置：

body {
  position: relative;
  margin: 0;
}
.cookie-consent {
  position: absolute;
  background: red;
  width: 100px;
  height: 80px;
  /* 动态计算位置：适配不同屏幕高度，你可以微调参数匹配设计需求 */
  bottom: calc(0.3fr + 0.5rem + 10vh);
  left: 10%;
  z-index: 20;
}

该方案适配性不如第一种，更推荐优先使用修改HTML结构的方案。

内容的提问来源于stack exchange，提问作者herbert mühlex