位置：嵌套到另一个粘性元素中的粘性元素在 Edge 中不起作用答案

【问题标题】：Position:sticky element which is nested into another sticky element doesn't work in Edge位置：嵌套到另一个粘性元素中的粘性元素在 Edge 中不起作用
【发布时间】：2018-10-12 22:25:39
【问题描述】：

我正在尝试开发具有固定标题和固定多列的表格。我为此使用了position: sticky，它在 Chrome/Safari/Firefox 中运行良好，但我在 Microsoft Edge 中发现了问题。

如果您使用position:sticky; top: 0; 创建元素并使用position: sticky; left: 0; 插入其他元素，Edge 将忽略嵌套元素。

在 Edge 中打开此示例并检查：https://codepen.io/finethanks/pen/aRWByx

是Edge的bug吗？

.wrapper {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  overflow: auto;
}

.content {
  width: 1000px;
  height: 1000px;
}

.sticky-wrapper {
  height: 30px;
  background: red;
  position: sticky;
  top: 0;
}

.item {
  width: 50px;
  height: 20px;
  background: yellow;
  position: sticky;
  left: 0;
}

<div class="wrapper">
  <div class="content">
    <div class="sticky-wrapper">
      <div class="item"></div>
    </div>
  </div>
</div>

【问题讨论】：

标签： html css css-position microsoft-edge

【解决方案1】：

小于 16 的 Edge 版本不支持“sticky”值。

请在此链接查看位置 css 属性的浏览器兼容性：https://developer.mozilla.org/en-US/docs/Web/CSS/position#Browser_compatibility

【讨论】：

我同意 Abdellatif 的建议。我在 MS Edge 和其他浏览器中使用您的示例代码进行了测试。我正在使用 Edge 17，它对我来说工作正常。如果您使用的是旧版本，请尝试安装最新更新并对其进行测试。如果问题仍然存在，请告诉我们。我们会尽力为您提供进一步的建议。