如何使用 CSS 定位旁注

Question

我想要的是

旁注。当然，最重要的问题是将它们放置在相对于引用它们的文本高度的高度。我可以使用 JavaScript 来完成，查看offsetTop注释引用的属性，但随后我还必须处理视口调整大小和缩放，而 CSS 解决方案会将这些留给浏览器。因此，CSS 解决方案是更可取的。

背景和动机

这是博客响应式设计的一部分。如果页边空白处有足够的空间，则注释应显示为旁注；否则，它们将作为脚注出现。这篇文章更详细地解释了它。请记住，超过一定宽度后，无论如何我们都会有边距，因为如果要保持可读性，文本行不能超过一定长度，因此我们也可以使用其他未使用的空间。Tufte 是该解决方案的知名支持者。

我试过的

到目前为止，我已经尝试了两种方法。它们都在标记 (a <sup>)上使用相对定位，以便能够以<span>相对于参考文本的顶部偏移量来定位注释 (a )。

---

我的第一次尝试使用绝对定位：

article {
   width: 50%;
   margin-left: auto;
   margin-right: auto;
}

sup {
   /* Needed to position sidenotes */
   position: relative;
}

.sidenote {
   width: 20%;
   position: absolute;
   
   /* BTW: This should be proportional to the note's height,
      so as to make its vertical center align with the text
      referencing it */
   top: -100%;
}

/* How could I set the notes' horizontal position relative to the margin or to an element other than the enclosing <sup>? */
.sidenote.l {
   right: 0;
}
.sidenote.r {
   left: 15vw;
}

<article>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<sup>1<span class="sidenote r">Several variations of this sentence are known.</span></sup>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
</article>

这里的问题是水平定位。由于我们的参考是<sup>，因此在边距附近设置旁注变得棘手。使用 JavaScript 可能可行，但是每次调整视口大小时我都必须更新偏移量。不期待了。

这篇文章提出了一种类似的方法，但没有显示应该将哪个父级设置为相对定位的参考。如果是<p>，就会出现问题，我们每个段落的每一侧只能有一个注释，这是我宁愿避免的限制。

---

我的第二次尝试围绕 CSS 网格展开：

article {
   display: grid;
   grid-template-columns: 15% auto 15%;
}

p {
   grid-column: 2;
}

sup {
   position: relative;
}

.sidenote.l {
   grid-column: 1;
}

.sidenote.r {
   grid-column: 3;
}

<article>
   <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<sup>1<span class="sidenote r">Several variations of this sentence are known.</span></sup>. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </p>
</article>

但是，似乎不可能将子项 (the <span>) 放在与其父项 (the <sup>) 所属的网格列不同的网格列中。

Answer 1

您可以使用float: right;sidenote 元素（将其右对齐）和一个margin-right等于或大于 sidenote 本身宽度的负值来执行此操作，并将 sidenote 元素移出主文本容器。浮动还确保它始终处于相关文本的高度。

（其他位置设置不需要，此时可以删除）

注释后添加：要将其向上移动以使其垂直居中，您可以在其上使用position: relative;和transform: translateY(-50%);，这会将其向上移动其自身高度的一半。然而，由于某种原因，它移动得太大了，所以我在我的代码片段中将其更改为 30% - 尝试找到适合您的值......

（但是，当它位于列/页面的顶部时，这可能会导致问题）

article {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
.sidenote {
  float: right;
  width: 20%;
  margin-right: -21%;
  position: relative;
  transform: translateY(-30%);
}

<article>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat<sup>1<span class="sidenote">Several variations of this sentence are known.</span></sup>.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</article>