Web Trick: CSS Relative Positioning inside Absolute Positioning

CSS:

*     { box-sizing:border-box; }

table { border-collapse:collapse; }

td { 

  margin:0; padding:0; width:100px; height:100px; text-align:left;

  vertical-align:top;

}

HTML:

<table>

  <tr>

    <td style="background:red;">1</td>

    <td style="background:green;">2</td>

    <td style="background:blue;">3</td>

  </tr>

  <tr>

    <td style="background:yellow;">4</td>

    <td style="background:cyan;">

      <span id="Parent" style="position:absolute; display:inline-block; 

      width:0; height:0;">

        <span id="Child" style="position:relative; left:50px; top:50px;

        display:inline-block; width:50px; height:50px; background:white;">5</span>

      </span>

    </td>

    <td style="background:purple;">6</td>

  </tr>

  <tr>

    <td style="background:pink;">7</td>

    <td style="background:olive;">8</td>

    <td style="background:lightblue;">9</td>

  </tr>

</table>