使 <div> z 索引 > 0 在零图层中占用 0 空间

Question

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

我的问题是，当菜单出现时，它会占用表行中的非零空间，从而略微移动所有<td>的宽度，尽管整个菜单的z-index: 1（在子菜单的情况下，甚至更高）。

我需要<tr>中的菜单<div>来处理css着色（当菜单在鼠标下时，整个<tr>都会高亮显示，如果菜单不在<tr>中，这就不起作用…），但我不希望打开菜单时列会跳来跳去。

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

更新

这是一个重现错误的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>