Firefox 57 中的置顶位置已损坏答案

【问题标题】：Position sticky broken in Firefox 57Firefox 57 中的置顶位置已损坏
【发布时间】：2017-11-16 18:03:09
【问题描述】：

我正在尝试使用位置粘性来制作粘性表格标题。

以下 jsfiddle 在 Chrome v64 中有效，但在 Firefox v57 中无效。

我是否缺少一些额外的 CSS 以使其在 Firefox 中工作？

CSS

.container {
  height: 200px;
  overflow: scroll;
}

th {
  position: sticky;
  top: 0;
}

HTML

<div class="container">
<table>
<thead>
  <tr>
    <th>Header</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
  <tr>
    <td>Cell</td>
  </tr>
</tbody>
</table>
</div>

【问题讨论】：

你知道 position:sticky 是一个实验性的 API，不应该在生产环境中使用吗？ developer.mozilla.org/en-US/docs/Web/CSS/position#sticky 浏览器兼容性：developer.mozilla.org/en-US/docs/Web/CSS/… & caniuse.com/#search=position%3Asticky
啊，是的，我现在明白了。该问题主要与粘性不适用于表格元素有关。
自 Firefox 59 以来一直在处理表格。

标签： css

【解决方案1】：

大多数浏览器不支持position: sticky 属性，因为它是一个实验性 API。而不是使用position: fixed; 使其成为sticky。

检查here 以了解浏览器兼容性。

【讨论】：

position: sticky 绝对可以在 Firefox 中使用，并且从 v56 开始。这不是@andrewdavey 遇到的问题。

【解决方案2】：

位置：粘性

这个css不兼容所有浏览器所以最好使用position: fixed

【讨论】：