Position image icon in HTML not working as expected - html

Question

what I need
this is what appearing
I am quite new to HTML and what I want is to have an image icon over another image to clarify more there is a banner and what I need is to have a small icon in the top right corner.
I have used this code
<DIV style="position: relative; top:0px; left:700px; width:200px;
height:5px"><a href="%%ftaf_url%%"><img
src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-612a-`4609-b5a6-3bc4231cdf86.png" border="0"></a></DIV>
it appears fine in content block but when i send email this icon is always appearing to be in left of screen no matter what I do. I have also used below code but this also doesn't helped.
<div style="display: flex; justify-content: right;">
<img src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-
612a-4609-b5a6-3bc4231cdf86.png" style="width: 40px; height: 40px;" />
</div>

Answer 1

use the below code
<div style="justify-content: right; text-align: right">
<img src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-
612a-4609-b5a6-3bc4231cdf86.png" />
</div>

Answer 2

Neither flexbox or position work reliably in HTML Email. Most common way to achieve this is using <table>s instead of <div>s, creating a bunch of table rows, and aligning the content.
Not sure what your code looks like, but something like this will work:
<table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td style="background: url('cross-hatch-background.jpg');">
<table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0" width="100%" style="">
<tr>
<td style="padding: 10px;">
<img src="envelope.png" align="right">
</td>
</tr>
<tr>
<td style="padding: 10px;">
<img src="logo.png" align="center">
</td>
</tr>
<tr>
<td style="padding: 10px;">
navigation
</td>
</tr>
</table>
</td>
</tr>
</table>