html - 叠加层上的 CSS 文本

Question

所以我有这段代码可以在我的网站上播放视频。

当我在本地运行它时，视频很好，文字在上面

当我上传它时，代码在它下面？

我使用了 z-index 2？将文本置于最前面

网站上是这样的 https://gyazo.com/b44cff259296ad76b3542880203bed14 在本地它看起来像这样 - https://gyazo.com/448e05e2e55cc904860cc2c62f0f33cc

所以我对堆栈溢出还很陌生，无法理解 CTRL + K 所以这里有 2 个 ghostbin 链接。 (对不起) HTML 代码 - https://ghostbin.com/paste/87ctg CSS 代码 - https://ghostbin.com/paste/cwnsf

body {
  background-color: #000000;
  padding: 0px;
  margin: 0px;
  font-family: "Futura Hv BT";
  overflow-x: hidden;
}

.v-header {
  height: 100vh;
  display: flex;
  align-items: center;
  color: white;
}

.container {
  padding-left: 1rem;
  padding-right: 1rem;
  margin: auto;
  text-align: center;
}

.fullscreen-video-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.fullscreen-video-wrap video {
  min-width: 100%;
  min-height: 100%;
}

.header-content {
  z-index: 2;

<header class="v-header container">
  <div class="fullscreen-video-wrap">
    <video src="https://gazzy.xyz/video.mp4" autoplay="true" loop="true">

            </video>
  </div>

  <div class="header-content">
    <h1>gazzy</h1>
    <a target="_blank" href="https://steamcommunity.com/id/fovon/">steam</a>
    <a target="_blank" href="https://discord.gg/Gb5nrNN">discord server</a>
    <button type="button" onclick="copyToClipboard('gazzy#1004'); alert('discord username copied to clipboard')">discord</button>
  </div>


</header>

Answer 1

我也是网络开发的新手，但我认为如果您尝试在文本 div 周围设置边距，它可能会起作用吗？也许尝试: mergin-top:20px; 并查看如何编辑文本，如果没有，请尝试执行此处的步骤:https://www.w3schools.com/howto/howto_css_image_text.asp 如果你像我一样讨厌阅读，或者试试这个视频: https://www.youtube.com/watch?v=edCuCED3Zmo