Html – The div element is outside and duplicated

Please senior programmers help me solve this problem, why is there a black color from the READMORE element outside the element itself, but when I delete position:absolute; on the card element, the color is gone and is normal. I’ve checked the inspect element in the browser, but in the black section there aren’t any columns, I’m confused about how to make sure everything is fine.

here is the html and css code to illustrate the problem:

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

.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;
}
.card::before{
  content: ''; 
  position: absolute;
  top: 173.7px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 23.5px; /* Sesuaikan tinggi sesuai kebutuhan Anda */
  width: 100%;
  background: linear-gradient(to right, transparent 239px, white 265px), linear-gradient(to left,transparent 258px, white 265px);
}
.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;
}
.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: 82rem; 
  white-space: normal;
}
.readmore {
  display: flex;
  position: absolute;
  bottom: 0;
  object-fit: cover;
  width: 245px;
  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);
}
.readmore h1 {
  border-radius: 10px 10px 0 0;
  color: #fff;
  display: flex;
  align-items: center; /* Memusatkan secara vertikal */
  justify-content: center; /* Memusatkan secara horizontal */
  width: 100%;
  height: 100%;
  font-size: 15px;
  text-transform: uppercase;
}

Ny Preview Web I want to get rid of the black color in the image below