Image in the top right corner of the table using css-CodePudding

Here is an example of some text, table and image. Is it possible to place image in the top right corner of the table? Also it is important to keep position of the divs as it is written (the next step would be to show image on table hover and I cannot achieve it when the image is before table).

table {
  width: 100%
}

table,
th,
td {
  border: 1px solid;
}

.div-img {
  z-index: 10;
  top: 0px;
  height: 0px;
}

<div>Some text</div>
<div>Some more text</div>
<div>
  <table>
    <thead>
      <th>Column 1 </th>
      <th>Column 2 </th>
      <th>Column 3 </th>

    </thead>
    <tr>
      <td>Col_1_1</td>
      <td>Col_1_2</td>
      <td>Col_1_3</td>
    </tr>
    <tr>
      <td>Col_2_1</td>
      <td>Col_2_2</td>
      <td>Col_2_3</td>
    </tr>
    <tr>
      <td>Col_3_1</td>
      <td>Col_3_2</td>
      <td>Col_3_3</td>
    </tr>
  </table>

  <div >
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA90RVh0VGl0bGUAU2hvdztFeWU7SeMHJQAAAf1JREFUeF7tVjFrwkAYNf4JB2c3J nf6OaYxdU/UVrsZAfByVGxQ8cgYhGSsXRoRHTIWi0VpJHSSrGg9Ou9cgeHueTSZCiFfPAg L33vhdzuVyOiP4U/ytAFiAL0Gw2TxguGWyGZ4ZPgF/b6HFOToFEASDMM5gMcwaKiTnX5NMEgKjM4ArjXq9HjuPQYrGg7XZL /0ewDV Qw8cOQi05SQBIKgz7GDU7/dpOp1S3AIXGmi5Rz1uAAw2GFAEjEYjkuvlbUfW/SOdXT QeeVQVEErfLinESdAS4g8zyO5vKdXatxM6PTiVoA0BQ85RCsqAIbXBHm1WgXuXAyXEaPgJYeoqQJgeJHhA6TZbHbsgb8dAwOIW/CEN59RVAXogDAYDFR6PPM0AQB4ixAdVYANmr7vq7RYcGkDwFsE2KgC Giu12tNAD3AVRS8RQBfFaCNpmVZmkegB7iKgrcI0FYFKDC8gzAejyMWoR7gHhc84c1nFMJewyrDF4jL5VLzGqoBDrhywQue3Luq24ganIwtVbMRBYaDE9iWhR 8NTthMMRwOKTD4RC2FQO4xm/ynUMDbcRw/cfIFGui2 2S67oUs8CFRn7mZtLPcYnhDkYiiG3bYZ9j9OTBxLWltAcSgy/OCUxjYsI1RvIDiTpMheE84kiGXuU3R7LsVJwFyAJ8A1C9Ckk935p4AAAAAElFTkSuQmCC"
    />
  </div>
</div>

CodePudding user response：

If you set the position of a container element to relative, you can move an element whose position is absolute based on the bounds of the container element.

table, th, td {
  border: 1px solid;
}

.container {
  position: relative;
}

.div-img {
    position: absolute;
    z-index: 10;
    right: 0;
    bottom: 100%;
}

<div>Some text</div>
<div>Some more text</div>
<div >
    <table style="width:100%">
      <thead>
        <th>Column 1 </th>
        <th>Column 2 </th>
        <th>Column 3 </th>

      </thead>
      <tr>
          <td>Col_1_1</td>
          <td>Col_1_2</td>
          <td>Col_1_3</td>
      </tr>
      <tr>
          <td>Col_2_1</td>
          <td>Col_2_2</td>
          <td>Col_2_3</td>
      </tr>
      <tr>
          <td>Col_3_1</td>
          <td>Col_3_2</td>
          <td>Col_3_3</td>
      </tr>
    </table>

    <div >
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA90RVh0VGl0bGUAU2hvdztFeWU7SeMHJQAAAf1JREFUeF7tVjFrwkAYNf4JB2c3J nf6OaYxdU/UVrsZAfByVGxQ8cgYhGSsXRoRHTIWi0VpJHSSrGg9Ou9cgeHueTSZCiFfPAg L33vhdzuVyOiP4U/ytAFiAL0Gw2TxguGWyGZ4ZPgF/b6HFOToFEASDMM5gMcwaKiTnX5NMEgKjM4ArjXq9HjuPQYrGg7XZL /0ewDV Qw8cOQi05SQBIKgz7GDU7/dpOp1S3AIXGmi5Rz1uAAw2GFAEjEYjkuvlbUfW/SOdXT QeeVQVEErfLinESdAS4g8zyO5vKdXatxM6PTiVoA0BQ85RCsqAIbXBHm1WgXuXAyXEaPgJYeoqQJgeJHhA6TZbHbsgb8dAwOIW/CEN59RVAXogDAYDFR6PPM0AQB4ixAdVYANmr7vq7RYcGkDwFsE2KgC Giu12tNAD3AVRS8RQBfFaCNpmVZmkegB7iKgrcI0FYFKDC8gzAejyMWoR7gHhc84c1nFMJewyrDF4jL5VLzGqoBDrhywQue3Luq24ganIwtVbMRBYaDE9iWhR 8NTthMMRwOKTD4RC2FQO4xm/ynUMDbcRw/cfIFGui2 2S67oUs8CFRn7mZtLPcYnhDkYiiG3bYZ9j9OTBxLWltAcSgy/OCUxjYsI1RvIDiTpMheE84kiGXuU3R7LsVJwFyAJ8A1C9Ckk935p4AAAAAElFTkSuQmCC" />
    </div>
</div>