在网页布局中，我们经常会使用全屏背景视频来提升页面的视觉效果，但很多开发者在添加交互按钮后会发现，按钮被背景视频遮挡，无法正常点击和触发事件，这类问题大多和CSS的z-index与position属性使用不当有关。
问题产生的核心原因
CSS的z-index属性用于控制定位元素在垂直于屏幕方向的堆叠顺序，但是z-index并不是对所有元素都生效，它有两个核心前提：
- 元素必须设置了有效的position属性，且值不能是static（默认定位）
- 元素或者其父元素没有创建特殊的堆叠上下文，导致z-index的比较范围被限制
背景视频通常被设置为绝对定位或者固定定位来铺满整个容器，默认的z-index可能会高于按钮元素，加上如果按钮没有设置正确的position属性，z-index就不会生效，自然就会被视频遮挡。
z-index与position的生效规则
position的生效取值
position属性除了默认的static之外，还有以下几个取值可以让z-index生效：
- relative：相对自身原位置定位，不会脱离文档流
- absolute：相对最近的非static定位父元素定位，脱离文档流
- fixed：相对浏览器视口定位，脱离文档流
- sticky：粘性定位，滚动到阈值前相对定位，之后固定定位
堆叠上下文的影响
当元素满足以下条件时会创建堆叠上下文，此时该元素的所有子元素的z-index只会在当前上下文内比较，不会和上下文外的元素比较：
- 根元素html
- position为absolute或relative且z-index不为auto
- position为fixed或sticky
- flex容器的子元素且z-index不为auto
- opacity值小于1的元素
- transform值不为none的元素
解决背景视频覆盖按钮的完整方案
我们可以通过调整背景视频和按钮的position与z-index值，确保按钮的堆叠层级高于视频，具体步骤如下：
1. 设置背景视频的样式
给背景视频容器设置定位属性，同时指定一个较低的z-index值，注意不要给视频容器设置过高的z-index，避免覆盖其他元素。
/* 背景视频容器样式 */
.video-container {
position: fixed; /* 固定定位铺满视口 */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* 设置较低的堆叠层级 */
overflow: hidden;
}
/* 视频本身样式 */
.video-container video {
width: 100%;
height: 100%;
object-fit: cover; /* 视频铺满容器，保持比例 */
}
2. 设置按钮的样式
给按钮设置position属性，同时指定比视频更高的z-index值，如果按钮的父元素没有创建堆叠上下文，那么按钮的z-index会和视频的z-index直接比较，更高的就会显示在上方。
/* 按钮容器样式 */
.btn-wrapper {
position: relative; /* 设置定位，让z-index生效 */
z-index: 2; /* 层级高于背景视频的1 */
/* 其他布局样式，比如居中 */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 按钮本身样式 */
.action-btn {
padding: 12px 32px;
font-size: 16px;
color: #fff;
background-color: #1890ff;
border: none;
border-radius: 4px;
cursor: pointer;
}
3. 对应的HTML结构
HTML结构需要保证按钮和视频容器的层级关系正确，避免不必要的父元素干扰堆叠上下文。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景视频按钮堆叠示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 背景视频容器 -->
<div class="video-container">
<video autoplay muted loop>
<source src="bg-video.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
</div>
<!-- 按钮容器 -->
<div class="btn-wrapper">
<button class="action-btn">点击交互</button>
</div>
</body>
</html>
常见问题排查
如果按照上述设置后按钮还是被遮挡，可以按照以下顺序排查：
- 检查按钮是否设置了非static的position属性，z-index对static定位元素无效
- 检查按钮或者视频的父元素是否创建了堆叠上下文，比如父元素设置了opacity小于1、transform不为none等属性
- 检查z-index的数值是否正确，数值越大堆叠层级越高，注意z-index只在同一堆叠上下文内比较
- 检查是否有其他元素的z-index数值更高，覆盖在按钮上方
注意：如果视频容器设置了transform、opacity等会创建堆叠上下文的属性，那么即使按钮的z-index更高，只要按钮不在该视频容器的堆叠上下文内，就会按照两个上下文的根元素z-index比较，此时需要调整两个上下文根元素的z-index值。
CSS_z-indexCSS_position背景视频元素堆叠堆叠上下文修改时间：2026-06-20 11:15:29