求助：无法让div元素显示在video视频上方

你的问题核心在于定位上下文不匹配，虽然给按钮Div加了position:absolute和z-index:999，但它的父容器是无定位属性的普通Div，导致定位基准是整个文档；同时视频所在Div的position:relative只作用于自身内部元素，两个同级Div的层级关系没被正确控制。

修复步骤： #

• 给最外层父Div添加position:relative，让按钮Div的定位基准改为这个父容器，和视频处于同一层级上下文
• 给按钮Div添加居中样式，确保它显示在视频上方的合适位置
• 明确设置视频所在Div的z-index低于按钮Div，强化层级优先级

修复后的完整代码： #

<!-- jQuery 3.3.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Fonts and Material Icons -->
<link rel="stylesheet" as="font" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,700|Material+Icons" />

<div style="position:relative; width:80%; margin:auto;">
  <div class="background" style="background-color:White; height:100%; padding-top:20%; background-repeat: no-repeat;position:relative; z-index:1;">
    <video width="100%" height="80%" controls autoplay>
      <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/mp4">
      <source src="https://www.pureohiowellness.com/rd/files/SpinningLogo.mp4" type="video/ogg">
      Your browser does not support the video tag.
    </video>
  </div>
  <div style="width:550px; height:auto; padding:10px; background-color:#47b216; border-radius:25px;z-index:999;position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);">
    <h2 style="text-align:center;">Welcome to Pure Ohio Wellness</h2>
    <h3 style="text-align:center;">Are you above the age 18?</h3>
    <div style="text-align:center;">
      <a href="rd/index.php"><button class="patientbutton" type="button">Yes</button></a>
      <a href="http://www.google.com"><button class="patientbutton2" type="button">No</button></a>
    </div>
  </div>
</div>

关键细节说明： #

• 最外层Div的position:relative是核心，它让内部绝对定位元素的基准从文档改为这个容器，确保按钮和视频的层级对比有效
• top:50%; left:50%; transform: translate(-50%, -50%);是绝对定位元素垂直水平居中的通用方案，无需手动计算边距
• 给视频Div设置z-index:1，按钮Div设置z-index:999，明确层级高低，避免浏览器默认层级规则干扰

内容的提问来源于stack exchange，提问作者Russell Ehrnsberger