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

您需要为这些元素提供与默认值position不同的static值。

只有这样，z-index才能起作用 - it applies to positioned elements only。

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

1 个答案: