如何将Div绑定到尺寸动态变化的视频？如何调整Figcaption至视频块起始处？

问题1：让div绑定到动态尺寸的视频上 #

要实现div跟随视频的右上角，核心是让div的绝对定位参考系与视频尺寸绑定，以下两种方案均可实现：

方案1：添加视频容器（轻微调整HTML结构） #

将视频和div放入同一个相对定位的容器中，div的绝对定位会基于容器尺寸，无论视频如何缩放，div都会固定在视频右上角。

<figure>
  <div class="video-wrapper">
    <video></video>
    <div>something</div>
  </div>
  <figcaption>title</figcaption>
</figure>

body {
  max-width: 100%;
  margin: auto;
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; /* 可选：调整标题与视频的间距 */
}

.video-wrapper {
  position: relative;
  min-width: 70%;
  max-width: 100%;
}

video {
  width: 100%;
  height: 400px;
  background: black;
}

.video-wrapper div {
  position: absolute;
  color: red;
  top: 0;
  right: 0;
  margin: 8px; /* 可选：避免div紧贴视频边缘 */
}

figcaption {
  min-width: 70%;
  max-width: 100%;
  text-align: left;
}

方案2：使用CSS Grid（无需修改原HTML结构） #

利用Grid布局让视频和div共享同一个单元格，div的绝对定位会自动匹配视频尺寸范围，同时保证视频居中显示。

body {
  max-width: 100%;
  margin: auto;
}

figure {
  display: grid;
  justify-content: center;
  gap: 8px; /* 可选：调整标题与视频的间距 */
}

video, figcaption {
  grid-column: 1;
}

video {
  grid-row: 1;
  min-width: 70%;
  max-width: 100%;
  height: 400px;
  background: black;
}

div {
  grid-row: 1;
  grid-column: 1;
  position: absolute;
  color: red;
  top: 0;
  right: 0;
  margin: 8px; /* 可选：避免div紧贴视频边缘 */
  z-index: 1; /* 确保div显示在视频上方 */
}

figcaption {
  grid-row: 2;
  min-width: 70%;
  max-width: 100%;
  text-align: left;
}

问题2：让figcaption对齐视频的左起始位置 #

上述两种方案中，figcaption的min-width和max-width都与视频保持一致，同时通过flex或grid的居中布局，让figcaption和视频的水平对齐方式完全相同，因此figcaption的左边缘会自动与视频左边缘对齐，无需JavaScript计算外边距。

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