父项 div 需要与子项 div 重叠

Question

我有一个 div 和 table 看起来像这样

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

我想要的是 div "mydiv" 应该与 table 重叠。我已经尝试了所有方法（z-index，定位）来做到这一点，但我无法这样做。感谢您的早期回应。谢谢！

Answer 1

你可以试试把这个CSS改成mydiv。添加了一张图片，以便您理解 div 与 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>

编辑：

为此，您可以将 pointer-events: none; 放在 table 上，当您单击 table cells 时，div 将被单击。我相应地修改了代码。希望这有帮助:)

这样做：

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

Answer 2

$('#mydiv').children().each(function(i, c) {
    disableSelection(c);
});

function disableSelection(target) {
    console.debug(target);

    if (typeof target.onselectstart != "undefined")             // For IE
        target.onselectstart = function() { return false };
    else if (typeof target.style.MozUserSelect != "undefined")  // For Firefox
        target.style.MozUserSelect = "none";
    else                                                        // All other routes (Opera, etc.).
        target.onmousedown = function() { return false };

    target.style.cursor = "default";
}


$( "#mydiv" ).click(function() {
  var htmlString = $( this ).html();
  alert(htmlString);
});

#mydiv{
  background : gray;
  position : absolute;
  margin :10px;
  padding:10px;
  filter: alpha(opacity=70);
  opacity: .6; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='mydiv'>
    <table>
        <tr>
            <td>mydata</td>
            <td>mydata2</td>
            <td>mydata3</td>
            <td>mydata4</td>
        </tr>
    </table>
</div>

父项 div 需要与子项 div 重叠

Parent div needs to be overlaped on child div

html

css

z-index

positioning