Html 偏移内联元素时放置粘滞

我试图做的是在内联元素上使用粘性位置的同时增量地偏移它们，这样当用户滚动时，元素锁定到位，形成一个连贯的结构。例如，我有一个父元素

div

，它包含一个子元素

p

，而子元素又包含多个子元素

span

<div>
  <p>
    <span>w</span>
    <span>o</span>
    <span>r</span>
    <span>d</span>
  </p>
</div>

W
o
R
D

您可以在每个字母上使用负百分比来抵消转换：

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
}
div{
边框：纯红2px；
框大小：边框框；
}
p{
字体系列：arial；
字体大小：104px；
边框：纯蓝2px；
框大小：边框框；
溢出y：滚动；
保证金：0；
}
跨度{
边框：纯黑2px；
框大小：边框框；
位置：粘性；
显示：内联块；
}
跨度：第n个孩子（1）{
转化：translateY（100%）；
前-100%；
}
跨度：第n个孩子（2）{
转化：translateY（200%）；
前-200%；
}
跨度：第n个孩子（3）{
转化：translateY（300%）；
前-300%；
}
跨度：第n个孩子（4）{
转化：translateY（400%）；
前-400%；
}

W
o
R
D

您可以在每个字母上使用负百分比来抵消转换：

html，
身体{
宽度：100%；
身高：100%；
保证金：0；
}
div{
边框：纯红2px；
框大小：边框框；
}
p{
字体系列：arial；
字体大小：104px；
边框：纯蓝2px；
框大小：边框框；
溢出y：滚动；
保证金：0；
}
跨度{
边框：纯黑2px；
框大小：边框框；
位置：粘性；
显示：内联块；
}
跨度：第n个孩子（1）{
转化：translateY（100%）；
前-100%；
}
跨度：第n个孩子（2）{
转化：translateY（200%）；
前-200%；
}
跨度：第n个孩子（3）{
转化：translateY（300%）；
前-300%；
}
跨度：第n个孩子（4）{
转化：translateY（400%）；
前-400%；
}

W
o
R
D

这里是另一种更适合单空格字体和通用字体的解决方案（您不需要使用第n个子字体设置样式）

div{
边框：纯红2px；
框大小：边框框；
}
p{
字体系列：monospace；
字体大小：90px；
边框：纯蓝2px；
框大小：边框框；
溢出y：滚动；
保证金：0；
线高：1.2米；
高度：1.2米；/*等于线高度*/
}
跨度{
位置：粘性；
排名：0；
显示：块；
}
跨度：第一个孩子{
边距顶部：1.2米；/*等于线条高度*/
}
span:不是（：第一个孩子）：：之前{
内容：“；
浮动：左；
宽度：1cm；
高度：1.3em；/*略大于线高度*/
}

H
E
L
L
o
W
o
R
D

这里是另一种更适合单空格字体和通用字体的解决方案（您不需要使用第n个子字体设置样式）

div{
边框：纯红2px；
框大小：边框框；
}
p{
字体系列：monospace；
字体大小：90px；
边框：纯蓝2px；
框大小：边框框；
溢出y：滚动；
保证金：0；
线高：1.2米；
高度：1.2米；/*等于线高度*/
}
跨度{
位置：粘性；
排名：0；
显示：块；
}
跨度：第一个孩子{
边距顶部：1.2米；/*等于线条高度*/
}
span:不是（：第一个孩子）：：之前{
内容：“；
浮动：左；
宽度：1cm；
高度：1.3em；/*略大于线高度*/
}

H
E
L
L
o
W
o
R
D

我上次编码已经有一段时间了，所以我的编码大脑没有满负荷工作，但这是一个有说服力的af。我上次编码已经有一段时间了，所以我的编码大脑没有满负荷工作，但这是一个有说服力的af。有人打败了你。尽管如此，还是要感激它，尽管它很邪恶！！等距字体是一种财富。希望它们符合我正在打造的品牌：（这是通过在每个字母前插入一个伪元素来实现的，它假设

第一个孩子的
边距顶部
？偏移量就是这样增加的吗？@oldboy它的工作原理是浮动的psuedo元素将字母推到每一行上。这里有一个更好的例子：有人打败了你。尽管如此，还是要感谢它！！等距字体是一件珍品。希望它们适合我正在打造的品牌：（这是通过在每个字母之前插入一个伪元素来实现的，该元素假定从
span:first child
中得到一个
边距顶部
？偏移量是如何增加的？@oldboy它是由于浮动的psuedo元素将字母推到每一行上的。下面是一个更好的说明：