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

Вам необходимо обернуть оба divs в 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> 

Answer 2

Я создал demo для вас

Я надеюсь, вот что вы просите. Вы можете изменить css соответственно, чтобы сохранить верхнюю строку фиксированной или прокручивать страницу при изменении размера браузера.

Ключ bottom и top Недвижимость.