Z-Index Text Over Image Outlook Email Client - html

Question

I am trying to make this piece work properly in outlook. I have text over an image that sits over a light blue background. I adjusted the z-index for each piece and played around with the positioning of each piece by setting them as relative and absolute. The background sits over the image just fine, but the text does not show. Below is the code. Any idea what is going wrong?
`
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="mobile-hide-outlook wrap-outlook" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div class="mobile-hide wrap" style="background:#F3F8FA;background-color:#F3F8FA;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<td style="direction: ltr; font-size: 0px; text-align: center; padding: 10px 30px;" align="center">
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
<div class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tbody>
<tr>
<td style="vertical-align:top;padding:0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:480px;" width="480"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:220;mso-position-horizontal:center;position:absolute;top:0;width:480px;z-index:-1;" src="https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->
<div style="margin:0 auto;max-width:600px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr style="vertical-align:top;">
<td style="background:url('https://go.covetrus.com/l/935183/2022-10-10/c8dlg/935183/1665413087E22V6ADi/booth_photo.png') no-repeat right center / cover;background-position:center;background-repeat:no-repeat;padding:0px 0px;vertical-align:top;background-size:contain;">
<!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" style="width:480px;" width="480" ><tr><td style="z-index:0;position:absolute;"><![endif]-->
<div class="mj-hero-content" style="margin:0px auto;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;margin:0px;">
<tr>
<td style="padding: 40px 0;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" style="font-size:0px;padding:0px 340px 0px 50px;word-break:break-word;">
<div class="keep-white" style="font-family:'Mulish', Arial;font-size:24px;font-weight:500;line-height:28px;text-align:left;color:#FFFFFF;">Connect with us at the Covetrus<sup style="font-size:10px;line-height:10px">®</sup> <span style="color:#27BDBE">Booth #10059</span></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
`
I tried giving the background color the lowest z-index and then the background image the middle z-index and the text, the highest index. I also tried adjusting the position as absolute, fixed and relative. All to no avail. I cannot get the text to show up. This error is only in relation to outlook.