Question

我差不多完成了一个我正在研究的大文本项目，我需要解决我一直在推迟的问题：我正在使用的旁注偶尔会相互碰撞并重叠。如果您查找ovoce a或Euripedes，则可以看到问题here。

解决问题的方法可能有很多种。但我不知道从哪里开始。任何建议或聪明的想法都会非常受欢迎。谢谢！

编辑：我正在尝试这个。似乎工作的解决方案不能很好地工作！

Answer 1

在HTML结构中，旁白与主文本属于同一列。如果你拿走旁白的CSS，它们将出现在原始位置，将主文本向下推进。 CSS将旁边推向左侧; position:absolute阻止旁边占用主要文本列中的空格。布局严重依赖于position:absolute。取出房产，段落前面的所有编号伪元素也将被取代。

要在没有绝对定位的情况下实现相同的效果，您必须重写大量代码：要么引入4列（而不是2列）表并将旁注移到自己的列中，要么切换到丛林中浮动div s。欢迎来到CSS地狱。

我不知道你对项目的限制有多严格，但这是另一种方法。

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

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

Answer 2

我搜索了ovoce并找到了问题。上面文字的旁注太长，所以它重叠。无论如何，你可以设置下面的文字样式并给它一个像这样的边缘顶部吗？

style="margin-top: 60px;"

试图解决CSS旁注重叠问题

2 个答案: