어디로 이동해도 다른 텍스트에 영향을 미치지 않도록 위젯에 어떤 속성을 지정할 수 있습니까?

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을 사용하여 이것을했다. (마법의 부분이 있습니다.) 그 요소들을 내용물 가까이에 두려면, 포함하는 요소()에도이 경우 위치 지정 문맥 -position: relative이 있어야합니다. 나는 간단하게 몇 가지 물건을 제거하고 단지 직접 sup 요소 스타일보다는 자신의 클래스를 사용하여

p { 
    position: relative; 
} 

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

참고 :

다음은 CSS입니다.