粘性列创建堆叠的堆叠上下文
Sticky column creates stacked stacking contexts
我有一个带有粘性列的 table。
当我在 3d 查看器中查看此 table 时，我可以看到每一列的 z-index 都比之前的列高。
所以当我想在这个栏目中使用下拉列表时，它总是被下一行的栏目覆盖。
td {
white-space: nowrap;
}
.fixed-column {
position: fixed;
right: 0;
background-color: white;
padding: .5rem;
}
.dropdown-menu {
position: fixed;
right: 0;
background: #0080ff;
}
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th class="fixed-column">Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
<div class="dropdown-menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</td>
</tr>
<!-- ... -->
</tbody>
</table>
这是一个带有示例的 plnkr：http://plnkr.co/plunk/CqqeSWIQrSsSVJB3
在这里您可以看到 3d 查看器的屏幕截图：
有什么方法可以防止浏览器将所有这些粘性单元格堆叠在 z 轴上，以便下拉菜单（蓝色 div-容器）显示在所有这些单元格的顶部？
如果您可以在显示菜单的单元格上动态设置 class，实现此目的的一种方法是为该特定单元格设置一个 z-index，它将在下一个单元格上呈现个：
td {
white-space: nowrap;
}
.fixed-column {
position: fixed;
right: 0;
background-color: white;
padding: .5rem;
}
.dropdown-menu {
position: fixed;
right: 0;
background: #0080ff;
}
.withmenu {
z-index: 1;
}
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th class="fixed-column">Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column withmenu">
<button type="button">Menu</button>
<div class="dropdown-menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
</tbody>
</table>
另一种解决方案是将菜单从 <td> 中取出并为其分配一个 z-index，但是这将需要动态定位...所以不是更好的解决方案。
我有一个带有粘性列的 table。 当我在 3d 查看器中查看此 table 时，我可以看到每一列的 z-index 都比之前的列高。 所以当我想在这个栏目中使用下拉列表时，它总是被下一行的栏目覆盖。
td {
white-space: nowrap;
}
.fixed-column {
position: fixed;
right: 0;
background-color: white;
padding: .5rem;
}
.dropdown-menu {
position: fixed;
right: 0;
background: #0080ff;
}
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th class="fixed-column">Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
<div class="dropdown-menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</td>
</tr>
<!-- ... -->
</tbody>
</table>
这是一个带有示例的 plnkr：http://plnkr.co/plunk/CqqeSWIQrSsSVJB3
在这里您可以看到 3d 查看器的屏幕截图：
有什么方法可以防止浏览器将所有这些粘性单元格堆叠在 z 轴上，以便下拉菜单（蓝色 div-容器）显示在所有这些单元格的顶部？
如果您可以在显示菜单的单元格上动态设置 class，实现此目的的一种方法是为该特定单元格设置一个 z-index，它将在下一个单元格上呈现个：
td {
white-space: nowrap;
}
.fixed-column {
position: fixed;
right: 0;
background-color: white;
padding: .5rem;
}
.dropdown-menu {
position: fixed;
right: 0;
background: #0080ff;
}
.withmenu {
z-index: 1;
}
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th class="fixed-column">Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column withmenu">
<button type="button">Menu</button>
<div class="dropdown-menu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
<tr>
<td>Cell 1 content with a lot of text ...</td>
<td>Cell 2 content with a lot of text ...</td>
<td>Cell 3 content with a lot of text ...</td>
<td>Cell 4 content with a lot of text ...</td>
<td>Cell 5 content with a lot of text ...</td>
<td>Cell 6 content with a lot of text ...</td>
<td>Cell 7 content with a lot of text ...</td>
<td>Cell 8 content with a lot of text ...</td>
<td>Cell 9 content with a lot of text ...</td>
<td class="fixed-column">
<button type="button">Menu</button>
</td>
</tr>
</tbody>
</table>
另一种解决方案是将菜单从 <td> 中取出并为其分配一个 z-index，但是这将需要动态定位...所以不是更好的解决方案。