getting wrong rendering in Image over image using HTML [closed]

Question

I am trying to add one image over another image, however i am unable to do so , while previewing and testing, it's rendering correctly however in outlook it's getting misplaced

Please can someone help me.

.fishes { position: relative; top: 0; left: 0; } .fish1 { position: absolute; top: 40%; left: 12%; } .fish2 { position: absolute; bottom: 5%; left: 12%; } .fish3 { position: absolute; top: 41%; right: 13%; } .fish4 { position: absolute; bottom: 5%; right: 13%; } .

<img src="IMG1.jpg" class="fishes" style="display: block; margin: 0px; outline: none; padding: 0px; width: 100%; text-align: center; height: auto;"
title="test" width="600">


<img src="IMG2.png" class="fish1" style="display: block; margin: 0px; outline: none; padding: 0px;  height: auto;" title="Learn_more1" width="48">

 <img src="IMG2.png" class="fish2" style="display: block; margin: 0px; outline: none; padding: 0px;  height: auto;" title="Learn_more2" width="48">
 
 <img src="IMG2.png" class="fish3" style="display: block; margin: 0px; outline: none; padding: 0px;  height: auto;" title="Learn_more3" width="48">
 
  <img src="IMG2.png" class="fish4" style="display: block; margin: 0px; outline: none; padding: 0px;  height: auto;" title="Learn_more4" width="48">

Answer 1

Firstly please be informed that the technique of coding HTML Emails is different. In order to support multiple MSPs [Mail Box Providers] you may have to use the Old School method of coding; specifically with the TABLE concept rather than using DIV or P tags.

To answer your above query, Outlook does NOT support many features. So suggest you use this valuable resource to check why specific CSS property is NOT working.

CSS Support guide = https://www.campaignmonitor.com/css/positioning-display/position/

here in your case the property position:xxx is NOT supported.