html - 两个表的 Z-index 不能正常工作

Question

我有一个表，其中的列数和行数未知(稍后由 jQuery 填充)。我需要确保列标题贴在页面顶部，这样当用户滚动离开时，他们就不会迷路。我尝试了很多不同的方法来将标题固定在顶部，以下是唯一有效的方法。

因此我在其上方构建了第二个表，其中仅包含列标题。然后我将它向下移动到原始表格的列标题上方。通过这种方式，用户可以滚动并使列标题看起来像是停留在那里。我在 bootstrap 2 中有这个工作。然后我迁移到 bootstrap 3，现在 z-index 不工作了。

基本上，现在发生的情况是，应该与底部表格重叠的顶部表格实际上是位于下方的表格。我玩过 z-index 的所有东西，但似乎没有任何效果。它总是在下面而不是上面。

这是我的 html。

    <!--ResultSet table columns only TOP TABLE-->
<div class="row tableScroll" id="resultsColumns" >
    <table class="table table-condensed table-hover table-striped table-bordered" id="ResultSetTableColumns">
        <thead></thead>
        <tbody></tbody>
    </table>
</div>

<!-- ResultSetTable BOTTOM TABLE-->
<div class="row tableScroll" id="results">
    <table class="table table-condensed table-hover table-striped table-bordered" id="ResultSetTable">
        <thead></thead>
        <tbody></tbody>
    </table>
</div>

还有我的CSS

    #results{
        overflow: auto;
        max-height: 440px;
        margin-left:.1em;
        z-index: -1000;
    }
    #resultsColumns{
        overflow:hidden; 
        margin-left:0.1em; 
        z-index: 8000;
    }
    #ResultSetTable{
        z-index: -1000;
    }
    #ResultSetTableColumns{
        margin-bottom: -2em;
        z-index: 8000;
    }

或者，也许你们知道一种更好的方法，可以在不改变行宽的情况下使底部表格的标题消失？

谢谢!

Answer 1

你需要给这些元素一个不同于默认值static的position值。

只有这样 z-index 才能工作 – it applies to positioned elements only .