イメージがオーバーレイされたときにテキストが「動く」のを防ぐには？ （テキスト上にイメージがオーバーレイされるように）

Question

右側の "手書き"の読み込み矢印は、テキストを "フリー...コース"を右側に移動させます。私はそのテキストを移動させたくありません。矢印を上に重ねて表示したい。 私は "style = dislay：block and float：none"というテキストを作ろうとしましたが、うまくいきませんでした。

他のアイデアはありますか？

Want free treatment materials  
     <img alt="" height="197" src="../images/arrow-sketched-down.png" width="154" style="float:right; position:absolute; "><strong><br>work on your goals?</strong></div> 
<div class="text-center mt-1 mb-1" style="display:block;float:none"> 
     <h2>Free Speech-Language Treatment Course</h2> 
     <p class="auto-style1">Every day is an opportunity for recovery.&nbsp; 
     Don't&nbsp;miss&nbsp;a&nbsp;single&nbsp;day. I'll&nbsp;provide&nbsp;you&nbsp;the&nbsp;tools&nbsp;&amp;&nbsp;knowledge&nbsp;for&nbsp;faster&nbsp;speech&nbsp;&amp;&nbsp;language&nbsp;recovery</p> 
    </div> 

Answer 1

は、そのpositionabsoluteに設定することによって、現在のドキュメントフローのうち赤い矢印を取ります。また、境界コンテナの矢印に行われた垂直/水平調整が実際にそのへ相対的であるように、親のpositionrelativeにそのを設定してください。

.parent { 
    position: relative; 
} 

.arrow { 
    position: absolute; 
}