我有三节垂直堆叠。第二部分恰好很宽，导致页面水平溢出。通过上述简单设置，请参阅此初始jsfiddle：
https://jsfiddle.net/cksam7q2/4/
<div class="container">
<div class="section" style="border: 3px dotted lightblue;">
Section 1
</div>
<div class="section" style="border: 3px dotted lightpink">
Section 2
<div style="width: 2500px; height: 500px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet justo donec enim diam vulputate ut. Et odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Gravida neque convallis a cras semper auctor. Scelerisque fermentum dui faucibus in ornare quam. Odio euismod lacinia at quis. Est sit amet facilisis magna. Sit amet nulla facilisi morbi tempus. Id velit ut tortor pretium viverra suspendisse potenti nullam. Consequat nisl vel pretium lectus quam id. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Sed odio morbi quis commodo odio aenean.
</div>
</div>
<div class="section" style="border: 3px dotted lightgreen;">
Section 3
</div>
</div>
请注意，在上面的小提琴/代码中，您可以看到水平滚动条出现在页面底部。它似乎是由浏览器显示的，因为页面中的所有元素都具有默认的overflow: visible，理论上它不会显示滚动条。
现在，如果我想使第1节在页面垂直滚动时始终停留在顶部，我只需要添加它：position: sticky; top: 0，请参见以下小提琴：
https://jsfiddle.net/cksam7q2/5/
现在是问题所在：我不想让第1部分在垂直滚动时粘在顶部，而是希望在水平滚动时将其粘在左边，以达到在第1部分停留时其他部分在下面水平滚动的效果。我希望它应该像添加到第1节一样简单：position: sticky: left: 0，但这是行不通的，然后第1节与其他各节一起水平滚动，请参见以下小提琴：
https://jsfiddle.net/cksam7q2/6/
使它起作用的唯一方法是在外部overflow-x: auto div中添加container。然后，第1部分会向左移动，并且不会水平滚动，而其他部分也会水平滚动，请检查以下小提琴：
https://jsfiddle.net/cksam7q2/9/
但是该解决方案不是最佳选择：发生的是，我将滚动条从页面移动到了container div，正如您在小提琴中看到的那样（我在{ {1}}突出显示滚动条属于container）
为什么container不能像position: sticky: left: 0一样工作？有没有一种方法可以使它与浏览器在底部设置的水平滚动条一起使用，而不必通过包含用于保存该节的容器中带有position: sticky; top: 0技巧的水平滚动来具体说明该容器？