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

标签 html css overlap

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

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

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

最佳答案

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

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

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

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

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

关于html - 试图解决 CSS 旁注重叠问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9508283/

相关文章:

javascript - 搜索无法以 Angular 工作的可折叠内容

javascript - 如何检查两个 'lines'是否重叠?

java - Java 中的重叠继承

javascript - 将数组中的每个元素与其他每个元素进行比较

javascript - 如何在 jQuery 和 CSS 中减少我的代码

jquery - 调整 jquery Accordion 小部件中面板的高度

html - 我们可以在 CSS 上使用 HTML 标签吗?

html - 媒体查询在桌面上不起作用

css - 即使设置为全局,网站也会显示不同的字体大小

jquery:没有插件的动画背景位置?