时间戳

首页 > 解决方案 > 位置：嵌套到另一个粘性元素中的粘性元素在 Edge 中不起作用

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

问题描述

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

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

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

这是Edge的错误吗？

.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>

标签： htmlcsscss-positionmicrosoft-edge

解决方案

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

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

推荐阅读