Question

我试图让一些文字在不使用绝对定位的情况下坐在视频上。我试图避免绝对定位，因为我的文本集上方有一些菜单项来证明内容：空间;如果我将文本设置为绝对定位并向左或向右赋予％偏移，则上面的项目与视频内的文本不同步。这是使用

的html

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

相对/静态定位元素的stacking order由它们在DOM中出现的顺序决定。较低的元素具有较高的堆叠顺序，因此您的视频容器将显示“超过”其先前的兄弟元素。

绝对定位真的是这里的方式。你发布的代码似乎在我的本地测试中运行良好。

让文本坐在视频标签上而不使用绝对定位

1 个答案: