レスポンシブな画像の上にテキストをオーバーレイする方法 - それに応じて？

Question

ウィンドウのサイズを変更したときにテキストが画像の外側に移動しないようにしたい。しかし、このコードでは、サイズを変更するときに上下にさまよっています。 私のテキストはアニメーションですが、それは問題ではありませんか？

.line-1{ 
 
    width: 24em; 
 
    margin: 0 auto; 
 
    border-right: 2px solid rgba(255,255,255,.75); 
 
    font-size: 2vw; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    transform: translateY(-50%); 
 
    font-family: 'Bitter', serif; 
 
    color: rgba(255,255,255,.75); 
 
    text-shadow: 3px 3px \t #000000;} 
 

 
    /* Animation */ 
 
    .anim-typewriter{ 
 
     animation: typewriter 4s steps(44) 1s 1 normal both, 
 
       blinkTextCursor 500ms steps(44) infinite normal; 
 
    } 
 
    @keyframes typewriter{ 
 
     from{width: 0;} 
 
     to{width: 11em;} 
 
    } 
 
    @keyframes blinkTextCursor{ 
 
     from{border-right-color: rgba(255,255,255,.75);} 
 
     to{border-right-color: transparent;} 
 
    } 
 
    
 
    #image { 
 
     left: 0; 
 
     top: 0; 
 
    } 
 
    #text { 
 
     z-index: 200; 
 
     position: absolute; 
 
     left: 27%; 
 
     top: 25%; 
 
    }

<center> 
 
      <div> 
 
      <img id="image" src="service.png" alt="ZJ-Automobile Service Angebot" 
 
      height="60%" width="60%" /> 
 
      <a href="zjservice.html"><p id="text" class="line-1 anim-typewriter"> 
 
       Unser Serviceangebot</p></a> 
 
      </div> 
 
     </center>

多分間違ったHTMLですか？私は本当にここで何が間違っているかは分かりません。 また、私は初心者ですので、心に留めてください。 私は私の質問に違って尋ねました。

After resizing

私が何を意味するかを参照してください？

Answer 1

簡単に言えば、1つの位置で2つの領域が必要です。 1位：絶対。

この例を見ると、どのように動作するかを示すローディングイメージが作成されています。

jsfiddleをリンクするコードが必要です。

#thisbanner { 
    max-width: 700px; 
} 

デモ：私は上記のJsfiddleのデモのリンクを参照してくださいされていない場合、ここでそれを追加しようとしますので、https://jsfiddle.net/norcaljohnny/nbfg3gtd/

すべてのデモは、スタック上で動作していません。

#thisbanner { 
 
    max-width: 700px; 
 
} 
 

 
h1 { 
 
    position: absolute; 
 
    display: block; 
 
    width: 80%; 
 
    margin-top: -12%; 
 
    max-width: 610px; 
 
    font-size: 4vw; 
 
    font-family: 'Roboto Slab', Rockwell, Serif; 
 
    font-weight: bold; 
 
    color: #FFF; 
 
    text-shadow: 0 .125em .125em rgba(0, 0, 0, .5); 
 
    padding: .6em 1em .6em 1.7em; 
 
} 
 

 
.interior-header img { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid #b22222; 
 
    padding: 1px;

<div id="thisbanner"> 
 
    <div class="interior-header img"> 
 
    <div class="headerimage"> 
 

 
     <img src="http://i.stack.imgur.com/i3eqP.jpg" width="630" height="240" alt="Traffic Control" /> 
 

 
     <h1>Traffic Control</h1> 
 
    </div> 
 
    </div> 
 
</div>