Parent div needs to be overlaped on child div

I have a div and table which looks like this

<div id='mydiv'>
    <table>
        <tr>
            <td>mydata</td>
            <td>mydata2</td>
            <td>mydata3</td>
            <td>mydata4</td>
        </tr>
    </table>
</div>

what I want is the div "mydiv" should overlap the table. I've tried all the ways(z-index, positioning) to do this but I am unable to do so. Appreciate for an early response. Thanks !

Solution

You can try putting this CSS to mydiv. Added an image for your understanding that the div is overlapping the table.

#mydiv
{
  background-color:#666666;
  z-index: 30001; 
  opacity: .6; 
  filter: alpha(opacity=70);
  position: fixed;
  height:20%;
}

var x = document.getElementsByTagName("BODY")[0];
x.onclick = function (e) {
  alert(e.target);
}

#mydiv
{
  background-color:#666666;
  z-index: 30001; 
  opacity: .6; 
  filter: alpha(opacity=70);
  position: fixed;
  height:20%;
}

<body >
<div id='mydiv'>
    <p style="position: absolute; left:30%; color: White;pointer-events: none;"> 
        <img id="loading"   alt="Loading ..." src="~/Images/loading.gif" /> 
    </p> 
    <table style="pointer-events: none;">
        <tr>
            <td>mydata</td>
            <td>mydata2</td>
            <td>mydata3</td>
            <td>mydata4</td>
        </tr>
    </table>
</div>
  </body>

EDIT:

For this you can put pointer-events: none; to your table and when you click on the table cells, the div will get clicked. I have modified the code accordingly. Hope this helps :)

Do it like this :

var x = document.getElementsByTagName("BODY")[0];
x.onclick = function (e) {
  alert(e.target);
}