CSS放置元素在另一个位置（非父级）

Question

我有一个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>

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

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

如何使用CSS实现此行为？

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

eo <a id="some_id"/> nebituratam

假设“50”在span-element

中

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

但是，我在这里放入什么？有没有办法在CSS中声明将此范围放在具有id“some_id”的锚点的水平上？

当然，锚点绝不能是span元素的父级。

老实说，我很确定我的问题在没有JavaScript之类的情况下无法解决，但我想尽可能避免使用skripts。

Answer 1

试试这个

＆＃13;

＆＃13;

 p{
  padding-left:50px;
  position:relative;
 }
 p span{
  position:absolute;
  left:10px;
  top:45%;
  font-size:16px;
  font-weight:bold;
 }

＆＃13;

<p>Qui corti. num sit igitu pugis quium. quem er Epiendis nessictilluptiudicaribus? qui ipsarent scit verspitomnesse
    con eiudicitinec tam ret pari Graeperi diurum eo <span>50</span> 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</p>

＆＃13;

＆＃13;

＆＃13;