Display Grid布局下position absolute定位异常问题

问题原因 #

你的代码中，.card-container使用绝对定位但未指定具体位置，默认会停留在文档流中图片下方的位置；而.card的高度仅由图片撑开，导致.card-container超出卡片范围，显示在外部。Grid布局的grid-auto-rows: auto仅根据文档流内的内容（也就是图片）计算行高，进一步放大了这个问题。

修复方案 #

1. 给卡片设置固定比例并隐藏溢出 #

让卡片保持统一尺寸，同时确保内部元素不会超出圆角：

.card {
  position: relative;
  background-color: #EADDA6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 20px;
  aspect-ratio: 4/3; /* 可根据需求调整比例 */
  overflow: hidden;
}

2. 让图片填满卡片 #

设置图片宽高为100%，用object-fit: cover保证图片比例不变形：

.card img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

3. 定位文本容器到卡片内部 #

指定.card-container的位置，比如固定在卡片底部，同时添加背景提升文字可读性：

.card-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: rgba(234, 221, 166, 0.9);
}

4. 修正链接元素的显示方式 #

让包裹图片和文本的<a>标签撑满整个卡片：

.card a {
  display: block;
  width: 100%;
  height: 100%;
}

修改后的完整代码 #

CSS

/*catalog style*/

.grid-container {
  padding: clamp(5px, 10vw, 20px) clamp(5px, 15vw, 30px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-auto-rows: auto;
  column-gap: 40px;
  row-gap: 40px;
}

.card {
  position: relative;
  background-color: #EADDA6;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 20px;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.2);
  opacity: 0.8;
  transition-duration: 0.3s;
}

.card img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.card a {
  display: block;
  width: 100%;
  height: 100%;
}

.card-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background-color: rgba(234, 221, 166, 0.9);
}

HTML

<section class="grid-container">
  <div class="card" th:each="animal : ${animals}">
    <a href="animal.html">
      <img src="../static/public/animals/gwen-weustink-I3C1sSXj1i8-unsplash.jpg" alt="Avatar">
      <div class="card-container">
        <h4 th:text="${animal.getName()}"><b>Tiger</b></h4>
        <p th:text="${animal.getSpecies()}">Mario</p>
      </div>
    </a>
  </div>
</section>

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