html - CSS:基于基线的绝对位置文本？

Question

我有需要在页面上绝对定位的文本坐标，但我有的坐标是文本的基线，而不是文本的左上角(可以是任何内容，具体取决于字符。)

目前文本会定位在左上角，这使得我的文本无法准确定位。

如何设置文本基线的绝对位置？也就是说，我要指定文本的基线位置，而不是文本的顶部。

请参阅:https://jsfiddle.net/8hnjoo68/

<div style="position:absolute; top:0px; left:0px; font-size: 42px;">This text should be off the page because it's baseline is set at 0.</div>
<div style="position:absolute; top:42px; left:0px; font-size: 42px;">Second line of text should be where the first one is, more or less.</div>

Answer 1

您需要将两个 div 包装在具有相对定位的 div 中。这样，当您设置 bottom: 0 时，它实际上会相对于 div 移动，让您产生消失的错觉。

示例 CodePen

请注意，您可能会看到一些悬挂的字母。要对此进行调整，您只需向 bottom: 20px;

添加更多内容

<div style="position:relative;">
    <div style="position:absolute; bottom: 0; left:0px; font-size: 42px;">This text should be off the page because it's baseline is set at 0.</div>
    <div style="position:absolute; left:0px; font-size: 42px;">Second line of text should be where the first one is, more or less.</div>
</div>