Html 在由div组成的类似表格的结构中，将列粘贴到左侧和顶部

我有一个由不同div（而不是html标记）组成的类似于表的结构。（有点像excel视图）

我想实现顶行（标题）和第一列（有一些操作）的固定

我所有的行动都在一个视图中。包含数据的每一行都是一个单独的视图，标题是一个单独的视图

我目前已根据需要申请职位：sticky/-webkit sticky和top:0/left:0

这已经能够解决我在大多数浏览器中的问题。然而，Safari的行为非常反常

我的左栏将保持固定，但滚动时的顶栏将退出视口

有人能建议其他修复或与狩猎相关的修复吗

请查看以下图片：

---

粘性可能很挑剔。如果您向我们展示了相关的html/css，那么提供解决方案就更容易了

是否有不能使用

position:fixed的原因而不是粘性？除非粘滞元素只是有时粘滞，否则“固定”应该可以工作

或者可以将主体设置为100%宽度和高度，
溢出：无
然后使用
overflow-y:scroll
或“auto”设置要滚动到100%高度的区域

编辑：根据您在下面的评论

我想我对你想做什么有更好的了解。您希望左栏与行一起上/下滚动，而不是左/右滚动<代码>位置：粘性可能是除javascript之外实现这一点的唯一方法

我认为你应该把最上面一行从等式中去掉。将整个内容放在一个容器中，然后在其中设置嵌套容器。有很多不同的方法来构建它。因为
位置：粘性相对于最近的可滚动祖先进行定位

我制作了一个JSFIDLE来展示一种可能的方法。我现在不能在safari中测试它，但也许你可以测试它，也许它可以给你一些不同的想法

我建议你用一种简化的格式制作同样的结构。从一个干净的html文件和基本的css重置文件开始。构建基本结构并对其进行调整，直到在需要支持的浏览器中实现一致性。然后在你的整个网站上使用这个基本模式。
粘性可能会很挑剔。如果您向我们展示了相关的html/css，那么提供解决方案就更容易了

是否有不能使用
position:fixed的原因而不是粘性？除非粘滞元素只是有时粘滞，否则“固定”应该可以工作

或者可以将主体设置为100%宽度和高度，
溢出：无
然后使用
overflow-y:scroll
或“auto”设置要滚动到100%高度的区域

编辑：根据您在下面的评论

我想我对你想做什么有更好的了解。您希望左栏与行一起上/下滚动，而不是左/右滚动<代码>位置：粘性可能是除javascript之外实现这一点的唯一方法

我认为你应该把最上面一行从等式中去掉。将整个内容放在一个容器中，然后在其中设置嵌套容器。有很多不同的方法来构建它。因为
位置：粘性相对于最近的可滚动祖先进行定位

我制作了一个JSFIDLE来展示一种可能的方法。我现在不能在safari中测试它，但也许你可以测试它，也许它可以给你一些不同的想法

我建议你用一种简化的格式制作同样的结构。从一个干净的html文件和基本的css重置文件开始。构建基本结构并对其进行调整，直到在需要支持的浏览器中实现一致性。然后在你的整个站点中使用这个基本模式。
因为
位置：粘性
在某些浏览器中的实现不一致，针对您的情况，可能的解决方法是将元素放在
、
或
中。然后你可以使用
位置：fixed在更有限的上下文中

不过，为了实现这一点，您需要将顶行放在iframe的上方和外部，并将所有可滚动内容放在iframe内部（左列和除顶行以外的所有内容）。只需将左侧列（在iframe内）设置为“固定”。将iframe放入div中，并使用
overflow-y:scroll（或自动），并使iframe本身高于其容器div，因此对于垂直，滚动发生在iframe外部，并且整个iframe元素在包含div的内部滚动，包括固定在iframe内部的左列。然后在iframe源的html/body元素上放置一个类，并使用
width:100%限制它们的宽度（容器的大小）并给它们
溢出-x：滚动（或自动），因此水平滚动发生在iframe内，左侧列固定且不会移动。
因为
位置：粘滞
在某些浏览器中的实现不一致，针对您的情况，可能的解决方法是将元素放在
、
或
中。然后你可以使用
位置：fixed在更有限的上下文中

不过，为了实现这一点，您需要将顶行放在iframe的上方和外部，并将所有可滚动内容放在iframe内部（左列和除顶行以外的所有内容）。只需将左侧列（在iframe内）设置为“固定”。将iframe放入div中，并使用
overflow-y:scroll（或自动），并使iframe本身高于其容器div，因此对于垂直，滚动发生在iframe外部，并且整个iframe元素在包含div的内部滚动，包括固定在iframe内部的左列。然后在iframe源的html/body元素上放置一个类，并使用
width:100%限制它们的宽度（容器的大小）