Какую собственность я могу дать надстрочным индексом, чтобы она не влияла на другой текст независимо от того, где я его перемещаю?

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 элементы напрямую, а не использовать их класс.