HTML / CSS，图像上方带有文字-EMAIL

Question

我正在尝试在图像上放置文字，但是Google似乎正在剥离我的样式标签？

我希望图像显示在左侧，并且在右侧图像上方有两个文本块（一个较高，另一个较低）外观上看起来不错，但是当我将其呈现图像发送到我的gmail帐户时，然后在图像下方添加了删除样式的文本a和b。

<style> 
.container {
  position: relative;
  
}
.text-blocka {
 position: absolute;
   top: 0px; 
   right: 10px; 
  left: 200px;
   text-align:right;
  color: #044C56;
  font-size: 32px;
  font-weight: bold;
font-family: Arial;
    line-height: 150%;
 
}
.text-blockb {
  position: absolute;
  bottom: 20px;
  right: 20px;
 color: black;
  padding-left: 100px;
  padding-right: 20px;
  text-align:right;
    font-size: 24px;
    line-height: 120%;

}
</style>
<div class="container">
  <img src="http://image.insights.invitae.com/lib/fe4215707564067f741774/m/1/8a2d8efe-96c0-4ad1-8a7c-2f7630a37dd4.png" alt="Test" style="width:50%;">
    <p class="text-blocka">Waiting for your Results? <br>They will be ready soon!
</p>
     <p class="text-blockb">
    In the meantime, log in to <br>your portal account to: 
  </p>
</div>

Answer 1

使用以下代码段

.container {
      position: absolute; 
    }

代替

.container {
      position: relative; 
    }

具有以下位置的元素：绝对；相对于最近定位的祖先定位。而不是相对于视口定位，如固定。