使用 position: fixed 和 z-index 可创建简易模态框。1. HTML 包含遮罩层和弹出框；2. 遮罩层通过 fixed 定位覆盖视口并设半透明背景；3. 模态框也使用 fixed 并居中显示；4. z-index 确保遮罩为 1000、模态框为 1001，使其层级最高；5. CSS 设置样式与布局，JavaScript 控制显隐。关键点：fixed 需配合 top/left 生效，z-index 仅作用于定位元素。
要使用 CSS 制作一个简易的模态框（弹层），关键是利用 position: fixed 将元素固定在视口中，并通过 z-index 控制层级，使其显示在页面其他内容之上。下面是一个简单、实用的实现方法。
1. 模态框的基本结构
HTML 结构通常包括一个遮罩层（overlay）和一个弹出框（modal）：
<div class="modal-overlay">
<div class="modal">
<h3>提示信息</h3>
<p>这是一个简易模态框</p>
<button class="close-btn">关闭</button>
</div>
</div>
2. 使用 position: fixed 固定位置
position: fixed 可以让模态框及其遮罩脱离文档流，并相对于浏览器视口定位，即使页面滚动也不会移动。
立即学习“前端免费学习笔记（深入）”；
关键样式如下：
- 将遮罩层铺满整个屏幕（top: 0; left: 0; width: 100%; height: 100%）
- 使用 background-color 设置半透明黑色作为遮罩效果
- fixed 定位确保模态框始终居中显示
3. 使用 z-index 控制层级
z-index 决定了元素的堆叠顺序。为了让模态框显示在所有内容之上，需设置较高的 z-index 值：
- 遮罩层一般设置 z-index: 1000
- 模态框本身设置 z-index: 1001，确保高于遮罩
- 页面主体内容保持默认 z-index（auto 或 0）
4. 完整 CSS 样式示例
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.modal {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
max-width: 400px;
text-align: center;
z-index: 1001;
}
.close-btn {
margin-top: 10px;
padding: 8px 16px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
通过 JavaScript 控制 `.modal-overlay` 的显示与隐藏（例如添加或移除 DOM，或切换 class），即可实现打开/关闭功能。
基本上就这些。不复杂但容易忽略的是：fixed 定位必须配合正确的 top/left 才能生效，而 z-index 只有在定位元素（relative、absolute、fixed）上才起作用。
