How do I prevent text from different table from appearing on a picture html email code

Question

So I place a picture in first table to position absolute to have text appear above it but the problem I'm having now is the table below text is also appearing on the image. How Do I prevent this from happening ?

<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <img src="img/suit1.jpeg" width="590px;" height="500px;" style="position:absolute">
          <h1>each</h1>
          <button>SHOP Now</button>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <h1>hello</h1>
        </td>
      </tr>
    </table>
  </td>
</tr>

Answer 1

Please try applying position: absolute to text elements. In my solution, i've wrapped text inside a div and applied position: absolute property. Also, i've applied position: relative to the parent element of both image and text.

<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td style="position:relative;">
          <img src="img/suit1.jpeg" width="590px;" height="500px;">
          <div style="position:absolute; top: 0; left: 10px;">
            <h1>each</h1>
            <button>SHOP Now</button>
          </div>
        </td>
      </tr>
    </table>
  </td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
  <td>
    <table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
      <tr>
        <td>
          <h1>hello</h1>
        </td>
      </tr>
    </table>
  </td>
</tr>