I’m trying to make a custom HTML element in a single-send email which overlays two images. Below is the code:
<img src="https://f.hubspotusercontent30.net/hubfs/6232437/img_highlight_circle_outline.png" style="position: absolute; width: 350px; height: 190px; margin-left: 100px; z-index: 1;" />
<img src="{{ custom.image_url }}" style="position: absolute; width: 190px; height: 190px; margin-left: 185px; border-radius: 95px; z-index: 2;" />
<div style="height: 190px" />
The second image is supposed to be overlaid within the first one. It renders fine on preview (it shouldn’t load since the image `src` is a custom token, but you can see it’s overlaid correctly):
But not in actual emails:
As you can see, all elements in the custom HTML block are rendered sequentially. I did some digging and noticed the `style=position: absolute` is to blame - this seems to be stripped from the email content, and manually adding it back in the Chrome inspector overlays the images as intended.
Does HubSpot strip out `position` style modifiers, or is this caused by something else? Unfortunately the content is fully dynamic (the second image will be a user’s profile picture), so we can’t create the images manually. Any tips appreciated!