html - 试图解决 CSS 旁注重叠问题

Question

我即将完成我正在处理的一个相当大的文本元素，我需要解决一个我一直拖延的问题:我使用的旁注偶尔会相互碰撞和重叠。可以看到问题here如果您寻找 ovoce a 或 Euripedes。

解决问题的方法可能有很多。但我只是不确定从哪里开始。任何建议或聪明的想法都将非常受欢迎。谢谢!

编辑:我正在再次尝试。看似有效的解决方案结果并不是太有效!

Answer 1

在您的 HTML 结构中，旁白与正文属于同一列。如果你拿走旁白的 CSS，它们会出现在它们原来的位置，将正文推得更靠后。 CSS 将边线推到左边； position:absolute 防止旁白占用正文列中的空间。布局在很大程度上依赖于 position:absolute。去掉这个属性，段落前面的所有编号伪元素也会被置换。

要在没有绝对定位的情况下实现相同的效果，您必须重写大量代码:要么引入一个 4 列(而不是 2 列)表并将旁注移动到它们自己的列中，要么切换到丛林 float div。欢迎来到 CSS hell 。

我不知道你的元素限制有多严格，但这里有另一种方法。

.sidenote {
    background-color: white;
}
.sidenote:hover {
    z-index: 10;
}

通过将 background-color 设置为白色，旁白将不透明。如果它们重叠，则向下的一侧将覆盖其上方的一侧。一旦用户将鼠标悬停在旁边，它就会被带到附近的旁边。