What property can I give superscript so that it doesn't influence/effect other text no matter where I move it?

Question

I want to move the superscript numbers using CSS to have them float directly above the text instead of on the side, but I don't want it to create margins on the surrounding text.

I've tried using negative margins but it messed everything up if the superscripts aren't the same digits/size.

I want them to be flush like this: 70/80/90/100/110

Here's my 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>

And here's as close as I got with the 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;
}

I'm also all ears for a better method to achieve this altogether but the content won't be static.

Answer 1

To make it as if the sup elements were never there, you need to take them out of the flow of the document. I've done this by using position: absolute. (Here comes the magic part.) To then keep those elements positioned near the content, you make sure that their containing element (the p) also has a positioning context - position: relative in this case.

Here's the CSS:

p {
  position: relative;
}

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

Note that I removed some stuff for simplicity, and just styled the sup elements directly, rather than using their class.