html - 在不使用绝对定位的情况下让文本位于视频标签上

Question

我试图在不使用绝对定位的情况下让一些文本位于视频之上。我试图避免绝对定位，因为我的文本上方有一些菜单项设置为 justify-content: space around;如果我将文本设置为绝对定位并给它一个 %offset left or right，上面的元素就会与视频中的文本不同步。这是我正在使用的 html

.service-tabs-group {
  display: flex;
  justify-content: space-around;
}

.service-tabs-group div div:last-child {
  display: block;
  text-align: center;
}

.media-section-group {
  height: 300px;
  overflow: hidden;
  position: relative;
}

video.background-video {
  width: 100%;
}

.field.field--field_mediatitle {
  position: absolute;
  left: 35%;
  top: 10%;
  font-size: 24px;
  color: #f47b20;
}

<div class="service-tabs-group">
  <div class="tab-1-group">
    <div class="field field--field_tab1type">
      <img class="program-details">
    </div>

    <div class="field field--field_tabtitle">
      Program Details</div>
  </div>
  <div class="tab-2-group">
    <div class="field field--field_tab2type">
      <img class="process">
    </div>

    <div class="field field--field_tab2title">
      EPD Process</div>
  </div>
  <div class="tab-3-group">
    <div class="field field--field_tab3type">
      <img class="benefits">
    </div>

    <div class="field field--field_tab3title">
      Benefits</div>
  </div>
</div>
<div class="media-section-group">
  <div class="field field--field_mediatitle">
    See what our clients are saying about us</div>

  <div class="field field--field_backgroundvideo">
    <video class="background-video" src="http://domain.dd:8082/files/lake_and_clouds_test1.1.mp4" poster="/files/bendingthecurve.jpg" autoplay="" loop="">
      <img src="/files/bendingthecurve.jpg">
    </video>
  </div>

  <div class="field field--field_mediaimage">
  </div>
</div>

我试过设置应该覆盖视频的文本以显示 block ，并使用文本对齐属性将其居中。然后我给它一个 - margin-bottom，它应该将它向下发送到视频上方，但它总是隐藏在视频后面。任何人都知道为什么它在后面而不是结束？

Answer 1

相对/静态定位的元素有它们的 stacking order由它们在 DOM 中出现的顺序决定。较低的元素具有较高的堆叠顺序，因此您的视频容器将“覆盖”其之前的同级元素。

绝对定位才是真正的方法。您发布的代码在我的本地测试中似乎运行良好。