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

我正在尝试全宽视频，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;
}

最佳答案

确保父元素具有position: relative;并且包含视频，并且父元素会根据视频进行响应调整。我这样做是通过获取视频的长宽比并创建填充（56.2％）来为视频的长宽比创建空间的（使用iframe section here中的技术），然后将文本放在该父元素中，并结合使用position: absolute; left: 50%; top: 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>