如何让表格单元格中的文字显示在伪元素圆点之上？-html教程

通过为 `

在实现吉他指板（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 示例：