求助,脚注相关的css

是这样,我在英文社区找到了一个在live preview模式将内联脚注浮动显示在侧边的css,打算配合最近的sidebar highlights插件结合批注时间做多次重复阅读时的批注。然后发现插入在同个句子后的多个内联脚注会堆叠起来无法完整显示,这种情况有无解决方案?求助



原英文版块链接如下:Footnotes as Sidenotes - #12 by ArloZ - Help - Obsidian Forum
以下是我使用的css:

.cm-comment-start,
.cm-comment-end,
.cm-inline-footnote-start,
.cm-inline-footnote-end {
color:transparent!important;
font-size:.1em;
letter-spacing:-0.5em;
}

.cm-comment-end::after,
.cm-inline-footnote-end::after {
content: " ✦ ";
font-size:20px;
text-shadow: 0 0 0 var(–interactive-accent);
position:relative;
bottom:9px;
opacity: 80%;
}

.cm-comment:not(.cm-comment-end):not(.cm-comment-start),
.cm-inline-footnote:not(.cm-inline-footnote-end):not(.cm-inline-footnote-start) {
position:relative;
z-index:100!important;
display:block;
margin-left:20px;
margin-right:-255px;
margin-top:-25px;
float:right;
width:210px;
font-size:.70em;
padding:10px;
border: 1px solid #36454F;
box-shadow: 3px 3px var(–interactive-accent);
opacity: 80%;
color: var(–text-muted);
background: var(–background-secondary);
}

/* Trying to hide in focus mode */

body.plugin-cm-typewriter-scroll-zen .cm-editor.cm-focused .cm-line:not(.cm-active) .cm-comment-end::after, {
opacity: var(–zen-opacity);
}

body.plugin-cm-typewriter-scroll-zen .CodeMirror-lines:not(.selecting) .CodeMirror-code > :not(.CodeMirror-activeline) .cm-comment {
font-size: 0px;
border: 0px solid #36454F;
box-shadow: 3px 3px rgba(0, 0, 0, 0);
color: var(–text-muted);
background: rgba(0, 0, 0, 0);
}
body.plugin-cm-typewriter-scroll-zen .cm-editor.cm-focused .cm-line:not(.cm-active) .cm-comment {
font-size: 0px;
border: 0px solid #36454F;
box-shadow: 3px 3px rgba(0, 0, 0, 0);
color: var(–text-muted);
background: rgba(0, 0, 0, 0);
}