CSS Grid实现周计划排班表时子项内部元素对齐问题求助

你之前尝试绝对定位失效的核心原因是未给父容器设置position: relative，绝对定位元素默认会相对于整个视口定位，因此会偏移到页面底部。这里推荐使用更稳定的flex布局空间分配方案，无需修改大的结构即可实现需求：

核心修改点 #

• 调整父容器flex布局的对齐规则，用justify-content: space-between实现上中下三个区域自动分布
• 将左上角的日期、Eat文本打包为独立容器，设置靠左上对齐
• 增加基础内边距避免文本贴边，优化显示效果

完整修改后代码 #

CSS 部分 #

plan {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 25vw;
  grid-gap: 0px;
}

plan-meal {
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

plan-meal > span{
  display: flex;
  align-items: center;
  /* 替换原有居中规则，实现上中下元素自动分布 */
  justify-content: space-between;
  width: 100%;
  height: 100%; 
  background-color:rgb(0,0,0, 0.3);
  flex-direction:column;
  /* 新增内边距避免文字贴边 */
  padding: 1vw;
  box-sizing: border-box;
}

plan-meal > span:hover{
  background-color:rgb(0,0,0, 0.1);
}

/* 新增左上角容器样式 */
.top-left {
  align-self: flex-start;
}
.top-left p {
  margin: 0;
  color: #fff;
  font-size: 0.85vw;
}

HTML 部分 #

<plan>
   <plan-meal style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')">
      <span>
         <!-- 把左上角内容打包为独立容器 -->
         <div class="top-left">
            <p>Mon, 21. Nov</p>
            <p>Eat</p>
         </div>
         <h1 style="color: #fff;font-size: 1.5vw;line-height: 1.6vw;white-space: nowrap;
            text-overflow: ellipsis; width:100%; text-align: center;margin: 0;">Day 1</h1>
         <span style="color: #fff;font-size: 1.2vw; white-space: nowrap;
            text-overflow: ellipsis; width:95%; text-align: center;">This is the sub</span>
      </span>
   </plan-meal>
   剩余plan-meal结构同上述示例，仅文本内容存在差异
</plan>

该方案不需要元素脱离文档流，适配性更强，若需要调整不同区域的间距，直接给对应元素添加margin值微调即可。

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