Html CSS：绝对按基线定位文本？

我有需要绝对定位在页面上的文本的坐标，但我有的坐标是文本的基线，而不是文本的左上角（可以是任何字符）

目前，文本将定位在左上角，这使得无法准确定位文本

---

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

请参阅：

此文本应离开页面，因为其基线设置为0。
第二行文本应该在第一行所在的位置，或多或少。

我已经为您创建了一个

我希望这就是你的要求。您可以相应地更改

css

，以固定顶行，或者在浏览器调整大小时滚动页面

---

键是

bottom

和

top

属性。

您需要将这两个

div

以相对定位方式包装在

div

中。这样，当您设置

bottom:0

时，它实际上会相对于

div

移动，给您一种消失的错觉

范例

请注意，您可能会看到一些悬挂的字母。要调整这一点，只需在

底部添加更多：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>


此文本应离开页面，因为其基线设置为0。
第二行文本应该在第一行所在的位置，或多或少。
这里有一个选项。我使用我的基线方法来获得一致的领先，所以您不需要担心字体度量。然后，我移动所有的框，使它们离开屏幕。使用
top
将框的底部基线放置在您希望的位置


/*1。包括基线字体*/
@字体{
字体系列：“基线Em”；
src:url（“https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff2）格式（“woff2”），url（“https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff）格式（“woff”），url（“https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.ttf）格式（“truetype”）；
字体大小：正常；
字体风格：普通；
}
/*简单复位*/
正文，html{
填充：0；
保证金：0；
}
/* 2. 设置块元素-前导*/
div{
字体系列：“基线Em”，无衬线；/*仅在块级别需要基线字体*/
线高：1米；
字体大小：42px；/*相当于前导字符*/
}
/* 3. 设置字体和字体大小*/）
跨度{
字体系列：无衬线；
线高：0；
字体大小：30px；/*任意大小，但会影响行数*/
}
/* 4. 定位*/
分区：第n个类型（1）{
轮廓：3倍点蓝色；
位置：绝对位置；
左：0；
排名：0；
转换：translateY（-100%）；
}
/*定位*/
分区：第n个类型（2）{
轮廓：3倍点红色；
位置：绝对位置；
左：0；
顶部：42px；
转换：translateY（-100%）；
}
文本的第一行
文本第二行
“我如何设置文本基线的绝对位置”-不清楚你想问什么基线是文本行的底部，不包括悬挂字符（如jgy等）。这是文本通常的定位方式，根据基线。相关（甚至可能是重复？）：嗨，迈克，这不是我的意思。@Alasdair好的，那么你可以包括任何图片或任何你想要实现的相同内容的实时示例链接。这将有助于更好地实现这一目标。不幸的是，当文本被包装时，这种方法不起作用
<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>