I am currently designing my email template with mjml. Within the template i want to use raw html code because i formatted this earlier and want to use it further...also because i don't know how to build something like that with mjml alone. So, the mj-raw tag is positioned under my logo, a divider and some text, but it shows up ahead those elements. But i want it in the same position i positioned it in the code.
Here the code:
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="300px" src="https://img.mailinblue.com/5639673/images/content_library/original/63dbb013f48c2f3fee7d9e79.png"></mj-image>
<mj-divider border-color="#0b54a0" border-width="2px"></mj-divider>
<mj-text align="center" font-size="20px" color="#3b3f44" font-family="Verdana, Tahoma, Geneva, sans-serif">
<h2>Hallo, $vorname! Wie versprochen, dein Ergebnis des Antreibertests!</h2>
</mj-text>
<mj-raw>
<div style='width: 80%; margin: auto; position: relative;'>
<div style='font-size: 32px; font-weight: 200; color: #fff; height: 40px; margin-bottom: 2px; background-color: rgb(21, 122, 110); float: left; width: 60%;'> Sei perfekt</div>
<div style='height: 40px; margin-bottom: 2px; background-color: rgb(237, 125, 58); float: left; width: 20%; text-align: left;'></div>
<div style='height: 40px; margin-bottom: 2px; background-color: rgb(163, 0, 27); float: left; width: 20%; text-align: left; border-radius: 0px 5px 5px 0px;'></div>
<div style='font-size: 32px; border-style: solid; border-width: 0px 1px 0px 0px; border-color: black; position: absolute; height: 40px; margin-bottom: 2px; background-color: rgba(13, 12, 11, 0.330); width: $perfektPro%; text-align: right; font-weight: 600; font-family: Verdana, Tahoma, Geneva, sans-serif; line-height: 40px; vertical-align: middle; border-radius: 0px 5px 5px 0px;'>$perfekt </div>
</div>
</mj-raw>
</mj-column>
</mj-section>
</mj-body>
</mjml>
As you can see, the colored row is on top, but should be under the text. Why is it that way and how can i change it? Thanks!
Not really sure why, but putting it in its own section works.