Youtube副本時間戳問題

我用position: absolute創建了一個類來在縮略圖上應用時間戳。前三次成功了，剩下的三次都失敗了?？s略圖的位置是相對的。我在HTML的每個縮略圖后添加了div格式的時間。

你好，歡迎來到堆棧溢出社區。

我希望這有所幫助，如果不覺得自由評論下面，我推薦 通過這一環節提高提問質量。

這里有一個你應該如何做的例子。

* {
  margin: 0;
  padding: 0;
}

.video {
  width: 360px;
  height: 170px;
  margin-left: 20px;
  position: relative;
  outline: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.videoContainer {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.timestamp {
  max-width: min-content;
  background: rgb(25, 25, 25);
  color: white;
  margin-top: auto;
  margin-left: auto;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<div class="videoContainer">
  <div class="video">
    <img src="https://i.ytimg.com/vi/9bZkp7q19f0/maxresdefault.jpg" alt="img 1" />
    <div class="timestamp">5:00</div>
  </div>
  <div class="video">
    <img src="https://img.freepik.com/premium-psd/business-youtube-thumbnail-design-template_475351-263.jpg?w=2000" alt="img 2" />
    <div class="timestamp">6:15</div>
  </div>
  <div class="video">
    <img src="https://img.pikbest.com/backgrounds/20210520/modern-youtube-thumbnail-design_5939729.jpg!bwr800" alt="img 3" />
    <div class="timestamp">1:30</div>
  </div>
  <div class="video">
    <img src="https://i.ytimg.com/vi/9bZkp7q19f0/maxresdefault.jpg" alt="img 4" />
    <div class="timestamp">5:30</div>
  </div>
</div>