html - 将文本定位在文本之上

Question

我有一个有填充和阴影的字体，所以它们需要一起使用，填充在上面，阴影在下面。我已经能够像这样在另一个之上分层:link

我是通过相对和绝对定位来做到这一点的:

HTML:

 <h1 class="fill">TEXT</h1>
 <h1 class="shadow">TEXT</h1>

CSS:

.fill {
    font-family: "Tilastia-Fill";
    position: relative;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    bottom: 50%;
}

当屏幕的方向从纵向变为横向时，我很难保持正确的外观，尤其是当我包含多行双层堆叠文本时。例如，当屏幕方向变为横向时，结果为:link

很明显，事情发生了变化，我不理解关于定位的一些基本内容。

Answer 1

您可以通过添加具有相对位置的父 div 使它们粘在一起

并使用相同的 css 根据此 div 定位两个文本

代码应该是这样的

div {
  position: relative;
}

.fill {
    font-family: "Tilastia-Fill";
    position: absolute;
    top:0;
    left:0;
}

.shadow {
    font-family: "Tilastia-Shadow";
    position: absolute;
    top:0;
    left:0;
    
}

 <div>
 <h1 class="fill">TEXT</h1>
 <h1 class="shadow">TEXT</h1>
 </div>

如果你想让一个比另一个移动多一点，你可以玩 left, right, top , bottom

你应该使用像素而不是 %

你可以看到一个例子 HERE