0

我有两张表，其中一张显示，另一张隐藏。
当页面加载时，我使用 jQuery 显示另一个，它显示完美，但问题是我希望隐藏的表格显示在我使用的另一个表格上，z-index但表格仍然彼此相邻显示。

<table border="1" class="mask">
    <tr>
        <td>this table should be over the background</td>
    </tr>
</table>
<table class="mask1" border="1">
    <tr>
        <td>this table should be in the background</td>
    </tr>
</table>

CSS：

.mask {
    display:none;
}

JS：

$(document).ready(function(){
    setTimeout(function(){
        get = $(document).find('.mask');
        $(get).show();
        $(get).css({"background-color": "red","z-index": "999"});
    },5000);
});

我展示了表格，背景采用红色，但z-index不能正常工作，表格没有显示在任何其他东西上。
有什么遗漏吗？

4

3 回答 3

1

属性对静态定位的z-index元素没有影响。
所以试着给position: relative你的第一张桌子

于 2013-08-01T08:46:31.690 回答
1

两个原因：

  1. 如果您不采取任何措施将元素移出其正常流动位置，那么它们将一个接一个地出现，您无法判断它们是否处于不同z-index的位置
  2. 该z-index属性仅适用于position设置为其他内容的元素static（这是默认设置）

添加position: relative; top: -20px;会导致它们重叠。您需要提出定位规则，将它们放在您真正想要的位置。

如果您希望它们的左上角重叠，则：

  1. 将两个元素放在一个容器中（一个 div 就可以了）
  2. 在那个 div 上设置position: relative（建立定位上下文）
  3. 设置position: absolute; top: 0; left: 0;在（至少）您要设置的表z-index上
于 2013-08-01T08:47:41.400 回答
0

为了使z-index属性生效，必须定位元素，这意味着它的position样式设置为相对、绝对或固定。

于 2013-08-01T08:46:25.627 回答