Bootstrap中fixed定位视频后Div位置异常及缩放适配问题求助

嘿，针对你遇到的这两个定位问题，咱们一步一步来解决：

1. Div覆盖在Fixed视频上方的问题 #

这本质是z-index堆叠层级的锅——fixed定位的元素脱离了正常文档流，默认堆叠顺序由代码出现顺序决定，但没显式设置z-index的话，很容易出现层级混乱。

你只需要给视频和内容Div分别设置z-index值，让视频作为底层背景，内容在上方展示：

body{ 
  font-family: 'Mina', sans-serif; 
  margin: 0; /* 可选：消除默认边距，避免视频周围留白 */
}
.navbar{ 
  margin-bottom: 0px; 
  z-index: 2; /* 可选：确保导航栏不被视频/内容遮挡 */
}
.navbar-brand{ 
  padding: 0px; 
}
.vid video{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1; /* 让视频处于最底层 */
}
.content {
  position: fixed;
  bottom: 0;
  color: #ffffff;
  width: 100%;
  padding: 0px;
  top: 10%;
  text-align: center; /* 补全你没写完的属性 */
  z-index: 1; /* 让内容保持在视频上方 */
}

2. 修改width:100%后缩放浏览器的内容溢出问题 #

当你把min-width:100%改成width:100%后，视频宽度被固定为容器的100%，浏览器缩放时（尤其是窄屏），视频高度会按比例缩小，导致无法覆盖整个视口，露出下方内容。

要让视频始终全屏覆盖且保持比例，推荐保留min-width:100%+min-height:100%，再加上object-fit: cover避免视频拉伸变形：

.vid video{
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;
  object-fit: cover; /* 关键：保持视频比例，填满整个视口 */
}

如果非要用width:100%，可以配合height:100vh和object-fit: cover，但宽屏场景下视频左右会被裁剪，灵活性不如前者。

内容的提问来源于stack exchange，提问作者james taylor