div元素外部重复及card设absolute时readmore黑色区域问题求助

问题1：HTML中存在多余的闭合div标签 #

原HTML代码末尾多了一个无关的</div>，导致DOM结构不匹配，修正后的HTML如下：

<div class="cardcontainer" id="cardcontainer">
  <div class="card">
    <img src="assets/CookieMastery-header.jpg" alt="Card header image">
    <div>
      <h5>This Is Title</h5>
      <p>This Is Description</p>
      <span class="readmore"><h1>This Is Button</h1></span>
    </div>
  </div>
</div>

问题2：card设置position:absolute时readmore外部出现黑色区域 #

问题根源 #

1. .card设绝对定位后，父容器.cardcontainer未设置相对定位，导致.card脱离文档流后相对于整个页面定位，引发布局偏移。
2. .card::before伪元素同时设置top、bottom和height属性，属性冲突导致渐变背景未完全覆盖目标区域，出现异常渲染。
3. .readmore未明确左右偏移量，且无z-index控制层级，导致与伪元素叠加异常。
4. .card p的max-height误用rem单位（原82rem），导致文本区域高度异常，间接干扰布局。

修正后的CSS代码 #

/* 给父容器添加相对定位，确保card的绝对定位基于父容器 */
.cardcontainer {
  position: relative;
}

.card {
  display: flex;
  flex-direction: column;
  color: #374151;
  background: #fff;
  background-clip: border-box;
  width: 273px;
  height: 339px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
  border-radius: 14px;
  position: absolute;
  flex: 0 0 auto;
  padding-left: 14px;
  padding-right: 14px;
  overflow: hidden;
}

/* 修正伪元素样式：移除冲突的height，用top+bottom控制高度，调整渐变适配card宽度，避免覆盖按钮 */
.card::before{
  content: ''; 
  position: absolute;
  top: 173.7px;
  bottom: 40px; /* 与readmore高度一致，留出按钮空间 */
  left: 0;
  right: 0;
  z-index: 1;
  background: linear-gradient(to right, transparent calc(100% - 34px), white 100%), linear-gradient(to left, transparent calc(100% - 15px), white 100%);
}

.card img {
  object-fit: cover;
  width: 245px;
  height: 160px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 8px;
}

.card h5 {
  font-size: 22px;
  max-width: 245px;
  height: 30px;
  white-space: nowrap;
  margin-bottom: 8px;
}

/* 修正max-height单位，从rem改为px */
.card p {
  font-size: 13px;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
  max-width: 235px;
  max-height: 82px;
  white-space: normal;
}

/* 明确readmore的左右偏移，添加z-index确保在伪元素上方 */
.readmore {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 14px;
  right: 14px;
  height: 40px;
  align-items: end;
  border-radius: 10px 10px 0 0;
  background-color: rgb(41, 41, 41);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.137);
  z-index: 2;
}

.readmore h1 {
  border-radius: 10px 10px 0 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 15px;
  text-transform: uppercase;
}

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