Jeśli użyję jednego z wymienionych tagów w celu uzyskania indeksu górnego lub dolnego, tekst przesuwa mi się w górę lub w dół rozwalając pozycjonowanie względem innych elementów. Jak temu zaradzić?

Może więcej informacji jakiś przykład w3schools

Może jakiś przykład online, albo chociaż kod ? Ja bym kombinował z

[CSS] pobierz, plaintext 
vertical-align:;
[CSS] pobierz, plaintext 

Daj oddzielny span pod tekst z indeksem. Daj display:inline-block i wypozycjonuj go height, lub paddingami lub marginami. Można to rozwiązać na wiele sposobów.

[HTML] pobierz, plaintext 
<ul class="font-controll">
	<li><a href="java script: Font.resize($('#content-wrapper .text'), 1)" title="Większa czcionka">A<sup>+</sup></a></li>
	<li><a href="java script: Font.resize($('#content-wrapper .text'), -1)" title="Mniejsza czcionka">A<sup>-</sup></a></li>
</ul>
[HTML] pobierz, plaintext 

Wykorzystałem pozycjonowanie relatywne. - Kontener zawierający i tak musi mieć position:relative;, więc ten też może mieć. Na szczęście odległość od lewej krawędzi jest stała, więc obyło się bez opakowywania tego w dodatkowy znacznik.