html - 让z-index > 0的在零层占用0空间

Question

我有一个 <table>当用户单击任何行时，我会在其中打开一个上下文菜单，方法是添加 <div>包含菜单直接到<tr> (是的，它不是有效的 HTML，我知道...)。

我的问题是，当菜单出现时，它占用了表格行中的非零空间，因此稍微移动了所有 <td> 的宽度。 s，虽然整个菜单都有一个z-index: 1 (或更高，在子菜单的情况下)。

我需要菜单 <div>在<tr>里面处理 css 着色(当菜单在鼠标下方时整个 <tr> 突出显示，如果菜单不在 <tr> 内则不起作用)，但我不希望这些列当我打开菜单时跳来跳去。

有没有办法强制<div>在 z-index: 0 中完全没有范围层，尽管它确实占用了上层的空间？

更新

Here's a jsFiddle重现错误。事实证明，它也与 Twitter Bootstrap 中的样式有关——没有它们，转换就会消失。不过，我需要它们，因为我们的 UI 就是用它设计的...

Answer 1

追加到行中的最后一个 td。类似于 - $(this).children('td:last-child').append。颜色似乎没有任何问题。

完整示例

(function () {
    $(function () {
        $('tr').on('click', function(evt) {
            $('.menu').hide().remove();
            $(this).children('td:last-child').append(
                $('<div>')
                    .addClass('menu')
                    .append('<p>This is the context menu</p>')
                );
            
            evt.stopPropagation();
        });
        
        $('body').on('click', function(evt) {
            $('.menu').hide().remove();
        });
    });
})();

tr:hover, tr:hover td {
    background: blue !important;
    color: white;
}

.menu {
    height: 100px;
    width: 80px;
    background-color: green;
    position: fixed;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="table table-striped">
    <tr>
        <td>First column</td>
        <td>Second column</td>
    </tr>
    <tr>
        <td>First column</td>
        <td>Second column</td>
    </tr>
</table>