我可以给上标什么属性，以便无论我在哪里移动它都不会影响/影响其他文本？

Question

我想使用CSS移动上标数字，使它们直接浮在文本上方，而不是侧面，但我不希望它在周围的文本上创建边距。

我试过使用负边距，但如果上标不是相同的数字/大小，就会把一切都搞砸。

我希望它们像这样齐平：70/80/90/100/110

这是我的HTML:

70/80<sup class="buffSup">-5</sup>/90<sup class="buffSup">-10</sup>/100<sup class="buffSup">-15</sup>/110<sup class="buffSup">-20</sup>

这是我对CSS的最接近：

.buffSup {
    display: inline;
    position: relative;
    color: green;
    font-weight:bold;
    left: -1.18em;
    top: -1.2em;
    font-size: 73%;
    margin-left: -0.45em;
    margin-right: -0.59em;
}

我也一直在寻找更好的方法来实现这一点，但内容不会是静态的。

Answer 1

要使sup元素看起来从未存在过，需要将它们从文档流中删除。我已经使用position: absolute完成了这项工作。（神奇的部分来了。）为了让这些元素定位在内容附近，你要确保它们的包含元素（p）也有一个定位上下文——在这种情况下是position: relative。

这是CSS：

p {
  position: relative;
}
sup {
  position: absolute;
  top: -1em;
  color: green;
  font-weight:bold;
  font-size: 73%;
}

请注意，为了简单起见，我删除了一些内容，只是直接设置了sup元素的样式，而不是使用它们的类。