本文详解如何使用 bootstrap 的定位工具类和 css 层叠规则，在图表容器顶部与底部精准叠加响应式标签（支持百分比高度控制），并纠正常见 z-index 书写错误导致的覆盖失效问题。
本文详解如何使用 bootstrap 的定位工具类和 css 层叠规则，在图表容器顶部与底部精准叠加响应式标签（支持百分比高度控制），并纠正常见 z-index 书写错误导致的覆盖失效问题。
在 Bootstrap 项目中，为图表（如 Canvas、SVG 或自定义 div 图形）添加上下覆盖式标签（Overlay Label）是一种常见需求——例如标注图例、时间范围或状态提示。但许多开发者会遇到“只有底部标签可见，顶部标签消失”的问题，根源往往在于 CSS z-index 的误写（如 z-2 被当作类名使用）以及 绝对定位元素的堆叠上下文缺失。
✅ 正确实现步骤
1. 使用 position-relative 容器建立定位上下文
外层 div 必须设置 position: relative（Bootstrap 提供 .position-relative 工具类），使内部 position: absolute 元素能相对于它定位。
2. 修正 z-index 写法：用内联样式或自定义类，而非无效类名
z-2 是无效的 CSS 类（Bootstrap 中无此命名），应改为 z-index: 2（顶部标签）、z-index: 1（图表）、z-index: 0（底部标签），或通过 DOM 顺序自然控制层叠（推荐）。
3. 支持百分比高度覆盖（如各占 10%）
利用 top: 0 / bottom: 0 配合 height: 10%，并设置 width: 100% 实现自适应覆盖：
<div class="position-relative" style="height: 300px; width: 500px; background-color: #f8f9fa;">
<!-- 顶部覆盖标签（占容器高度 10%） -->
<div class="position-absolute top-0 w-100" style="height: 10%; background-color: #6c757d; z-index: 2;">
<h3 class="text-white m-0 p-2 text-center">Top Label (10%)</h3>
</div>
<!-- 图表主体（居中，避免被标签遮挡内容） -->
<div class="position-absolute top-50 start-50 translate-middle"
style="height: 80%; width: 100%; background-color: #dc3545; z-index: 1;">
GRAPH CONTENT
</div>
<!-- 底部覆盖标签（占容器高度 10%） -->
<div class="position-absolute bottom-0 w-100" style="height: 10%; background-color: #fd7e14; z-index: 2;">
<h3 class="text-white m-0 p-2 text-center">Bottom Label (10%)</h3>
</div>
</div>? 提示：
top-50 start-50 translate-middle是 Bootstrap 5+ 推荐的居中方式，比手动margin-top更可靠；position-absolute+top/bottom可确保标签始终贴边，不受内部内容影响。
⚠️ 关键注意事项
- ❌ 不要写
z-2、z-1等类名——Bootstrap *不提供 `z-响应式 z-index 工具类**（截至 v5.3），必须用内联style="z-index: X"` 或自定义 CSS。 - ✅ 若需复用，建议定义 SCSS 变量或工具类：
.z-0 { z-index: 0 !important; } .z-1 { z-index: 1 !important; } .z-2 { z-index: 2 !important; } - ✅ 百分比高度生效的前提是：父容器（
.position-relative）必须有明确高度（如height: 300px或通过 Flex/Grid 继承高度）。 - ✅ 标签内容若过长，建议添加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;保证 UI 稳定。
✅ 总结
实现图表上下覆盖标签的核心在于：正确的定位上下文 + 合理的 z-index 数值控制 + 百分比尺寸配合显式父高。摒弃 z-2 等错误写法，善用 Bootstrap 的 position-* 和 top/bottom 工具类，即可轻松构建语义清晰、响应灵活的覆盖式标注系统。
