如何在图像叠加时防止文本“移动”？ （所以图像覆盖在文本上）

Question

右侧的“手绘”阅读箭头强制文本“Free ... Course”向右移动。我不希望该文本移动。我希望箭头只是叠加在上面。 我试过制作文本“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

将“position设置为absolute，从当前文档流程中取出红色箭头。另外，请确保将其“父级position设置为relative，以便对箭头进行的任何垂直/水平调整实际上相对到其”边界容器“。

.parent {
  position: relative;
}

.arrow {
  position: absolute;
}