Html CSS将元素放置在另一个（不是父元素）的位置

我有一个主要由文本组成的XML文件。但是，其中有一些元素包含附加信息。让我们将这些附加信息位称为“元素”。在一些段落中没有这些，在一些段落中有几个。有时甚至会有一对一对的。然而，在不同的段落中，它们总是处于不同的位置

这是模型：

<paragraph>
Qui <element>20</element> corti. num sit <element>10</element><element>5</element> igitu pugis quium. quem er Epiendis nessictilluptiudicaribus? qui ipsarent scit verspitomnesse con eiudicitinec tam ret pari Graeperi diurum eo <element>50</element> nebituratam num aerminxeato nilibus. nostereffer est modulceribus,  ficantendus anonea Chraectatur, quemodumquae ut pet sum re vivatotertentu vitra cortem nonemod hunturunclia dolum poraectiatiamas rein eximplatorefut egra vartere
</paragraph>

魁20科尔蒂。数到105个。这是一个什么样的结局？同样，科学界和审计界对50个尼比妥类抗生素的研究结果也不一致。nostereffer est Moduleceribus，ficantendus anonea Chraectatur，quemodumquae ut pet sum re vivatoter vitra cortem nonemod hunturunclia dolum poratiatias rein eximplater egra vartere

现在我想用XSLT将这个XML文件转换成HTML。问题是：“附加元素”不应该出现在文本中的任何地方，而应该出现在单独的列中。像这样：

如您所见，数字（带有我的“附加信息”）正好出现在文本中的级别：“20”、“10”和“5”位于第一行，因为在XML源数据中，它们是在文本第一行的输出中的单词“Qui”和“sit”之后引用的。“50”正好处于“eo”nebituram级别

如何使用CSS实现这种行为

将锚元素放在HTML中的相同位置相当容易：

eo <a id="some_id"/> nebituratam

eo尼比妥拉坦

假设“50”位于跨度元素中

<span stlye="...">50</span>

50

然而，我在CSS中放了什么呢？有没有一种方法可以在CSS中声明，将这个跨度放在id为“some_id”的锚级别上

当然，锚决不能是跨度图元的父图元

老实说，如果没有JavaScript或其他东西，我很确定我的问题是无法解决的，但我希望尽可能避免使用skripts。

试试这个

p{
左侧填充：50px；
位置：相对位置；
}
p跨度{
位置：绝对位置；
左：10px；
最高：45%；
字体大小：16px；
字体大小：粗体；
}

Qui corti.num sit igitu pugis Qui.QUE er Epiendis NESSICTILLUPTILLOUPTUDIBARIBUS？Qui Qui IMPSARENT scit VSPITOMMESS
根据《每日饮食法》第50条的规定，研究对象为尼比妥钠（nebituratam num aerminxeato nilibus）的替代品，
这是一个令人不安的国家，它是一个充满活力的国家
poratiatimas rein eximplatorrefort egra vartere

试试这个

p{
左侧填充：50px；
位置：相对位置；
}
p跨度{
位置：绝对位置；
左：10px；
最高：45%；
字体大小：16px；
字体大小：粗体；
}

Qui corti.num sit igitu pugis Qui.QUE er Epiendis NESSICTILLUPTILLOUPTUDIBARIBUS？Qui Qui IMPSARENT scit VSPITOMMESS
根据《每日饮食法》第50条的规定，研究对象为尼比妥钠（nebituratam num aerminxeato nilibus）的替代品，
这是一个令人不安的国家，它是一个充满活力的国家
poratiatimas rein eximplatorrefort egra vartere

试试这个

p{
左侧填充：50px；
位置：相对位置；
}
p跨度{
位置：绝对位置；
左：10px；
最高：45%；
字体大小：16px；
字体大小：粗体；
}

Qui corti.num sit igitu pugis Qui.QUE er Epiendis NESSICTILLUPTILLOUPTUDIBARIBUS？Qui Qui IMPSARENT scit VSPITOMMESS
根据《每日饮食法》第50条的规定，研究对象为尼比妥钠（nebituratam num aerminxeato nilibus）的替代品，
这是一个令人不安的国家，它是一个充满活力的国家
poratiatimas rein eximplatorrefort egra vartere

试试这个

p{
左侧填充：50px；
位置：相对位置；
}
p跨度{
位置：绝对位置；
左：10px；
最高：45%；
字体大小：16px；
字体大小：粗体；
}

Qui corti.num sit igitu pugis Qui.QUE er Epiendis NESSICTILLUPTILLOUPTUDIBARIBUS？Qui Qui IMPSARENT scit VSPITOMMESS
根据《每日饮食法》第50条的规定，研究对象为尼比妥钠（nebituratam num aerminxeato nilibus）的替代品，
这是一个令人不安的国家，它是一个充满活力的国家
Poractiatimas rein EximplatorRefut egra vartere

谢谢！我想这里的关键部分是

top:45%；

你从哪里得到的？通过手动估算？这不适合我。正如我试图解释的那样，我正在对数百个这样的案例进行自动转换。手动设置每个案例的位置并不适合我r我。不过，谢谢你的时间！似乎这个答案应该有效。如果“top:45%”对你来说不够全面，你可以将相同的结果设置为“top:50%”（跨度居中，并添加负边距顶部（约为跨度元素高度的一半）.Muthukumar给出的答案应该适用于你的数百个案例。不幸的是，我的“附加信息”"元素总是处于不同的位置。这根本无法与

top:45%；

一起工作，因为我没有说清楚。我已经编辑了我的问题。谢谢！我想这里的关键部分是

top:45%；

你从哪里得到的？通过手动估算？这不适合我。正如我试图解释的，我正在进行自动转换正在处理数百个这样的案例。手动设置每个案例的位置不适合我。不过，感谢您的时间！这个答案似乎应该有效。如果“top:45%”对您来说不够全面，您可以将相同的结果设置为“top:50%”（跨度居中，并添加负边距top）（大约跨度元素高度的一半）。Muthukumar给出的答案应该适用于您的数百个案例中的每一个。不幸的是，我的“附加信息”元素