テキストの上にテキストを配置

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%; 
} 

私は、適切な外観を維持するのに苦労しています画面のnが縦長から横長に変化します。特に複数行の二重積みテキストが含まれていると、たとえば、画面の向きが横長に変更された場合、結果は次のようになります。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>

、あなたは1その後、もう少し移動する場合他には、あなたはleft, right, top , bottom

で遊ぶことができますし、代わりに％

のピクセルを使用する必要があり、あなたはあなたが単に `テキストshadow`使用できるHERE