html - 定位时控制文本的位置

Question

我正在尝试全宽视频 following代码是一个例子。我不想通过给它一个高度来限制视频，因为它是响应式的，但是当我在小屏幕上查看它时，位于它上面的内容或上面的内容正在下推，例如移动的 我怎样才能确保视频上的文本显示在相同的位置，即使屏幕很小并且它下面的文本或面板也隐藏在视频后面或隐藏/重叠视频。

我想让视频和下面的文字体面，而不是跳跃或隐藏。我使用的位置有误吗？

.centered{
    position: relative;
    top:50%;
    z-index: 1;
    color:#fff;
    text-shadow:1px 1px 10px #000;
}
video{
    background-size:cover;
    width: 100%;
    position: absolute;
    top:0;
}

Answer 1

确保父元素具有 position: relative; 并包含视频，并且父元素会根据视频进行响应调整。我通过获取视频的纵横比并创建填充 (56.2%) 来为视频的纵横比创造空间(使用 iframe section here 中的技术)，然后将文本放入该父元素并使用组合position:absolute；左:50%；顶部:50%； transform: translate(-50%,-50%); 使文本在视频上居中。

* {margin:0;padding:0;}

#video {
  height: 0;
  padding-top: 56.2%;
  position: relative;
  overflow: hidden;
}

#video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: url(polina.jpg) no-repeat;
  background-size: cover;
}

#video h1 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  color: #fff;
  text-shadow: 1px 1px 10px #000;
  font-size: 36px;
  font-family: sans-serif;
  text-align: center;
}

<div id="video">
  <video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
  </video>
  <h1>We Evolve with our students
</div>