通过为 `
在实现吉他指板（fretboard）可视化表格时，常需同时展示标记（如黄色圆点）和音符文字（如 "A"）。但默认情况下，使用 ::before 伪元素绘制的圆点会自然覆盖单元格内的文本内容——这是因为伪元素默认参与父元素的层叠上下文，且未显式设置 z-index 时其堆叠顺序可能高于文本流内容。
关键解决方案在于主动控制层叠上下文与层级关系：
- ✅ 为
元素添加 position: relative 和 z-index: 0：这会创建一个新的层叠上下文（stacking context），使该单元格成为其子元素（包括伪元素和文本）的层叠参考容器； - ✅ 将 td.selected::before 的 z-index 设为 -1：使其明确位于该上下文的底层，而单元格内常规文本（作为“层叠级别 0”内容）自动显示在其上方；
- ❌ 不要省略 z-index: 0 在
上：若仅设伪元素 z-index: -1 而父元素无层叠上下文，则负 z-index 可能将其推至整个页面背景层之下，导致不可见。 以下是修正后的完整 CSS 与 HTML 示例：
table { background: black; border-collapse: collapse; } td { position: relative; z-index: 0; /* 关键：创建层叠上下文 */ width: 40px; height: 40px; text-align: center; color: transparent; /* 初始隐藏文字，hover 时再显示 */ font-weight: bold; } td.selected::before { content: ''; position: absolute; left: 50%; top: 15%; transform: translateX(-50%); /* 更精准居中 */ background: yellow; width: 16px; height: 16px; border-radius: 50%; z-index: -1; /* 关键：置于文字下方 */ } td.show { color: red; /* hover 或激活状态显示文字 */ }A B C ? 额外提示：
- 使用 transform: translateX(-50%) 替代纯 left: 50% 可更精确水平居中圆点；
- 若需支持多状态（如不同颜色/形状标记），建议用 CSS 自定义属性（--dot-color）配合 ::before 动态控制，提升可维护性；
- 避免对 ::before 使用 z-index: 0 或正值——这反而可能再次遮挡文字，除非你刻意构建多层覆盖效果。
该方案轻量、兼容性强（支持所有现代浏览器及 IE11+），无需 JavaScript，纯粹依靠 CSS 层叠规则达成语义清晰、视觉准确的指板交互表现。
