问题：
javascript - 关于css sticky粘性问题？
濮阳和泰
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sticky Sidebar Example</title> <style>.table-container { display: block; max-width: 300px; max-height: 400px; /* 根据需要调整 */ overflow: auto;}.header-row { display: flex; position: sticky; top: 0; background-color: #f8f8f8; z-index: 1;}.header-cell,.cell { min-width: 80px; padding: 8px; border: 1px solid #ddd;}.header-cell { font-weight: bold;}.cell-fixed { position: sticky; left: 0; background-color: #f8f8f8; z-index: 1;}.table-body { display: block;}.row{ display: flex;} </style></head><body> <div class="table-container"> <div class="header-row"> <div class="header-cell header-fixed">Header 1</div> <div class="header-cell">Header 2</div> <div class="header-cell">Header 3</div> <div class="header-cell">Header 4</div> <div class="header-cell">Header 5</div> <div class="header-cell">Header 6</div> <div class="header-cell">Header 7</div> <!-- 更多头部单元格 --> </div> <div class="table-body"> <div class="row"> <div class="cell cell-fixed">Row 1</div> <div class="cell">Data 2</div> <div class="cell">Data 3</div> <div class="cell">Data 4</div> <div class="cell">Data 5</div> <div class="cell">Data 6</div> <div class="cell">Data 7</div> <!-- 更多数据单元格 --> </div> <!-- 更多行 --> </div> </div></body></html>左右滑动时可以粘住在左边，但是左右滚动超过300px就不粘住了，求解
共有1个答案
陶高峻
可以这样改一下试下：
.table-body { display: flex;}粘性元素会“粘”到其最近的具有“滚动机制”的祖先元素，但只会在他所处的 table-body 容器里生效，table-body 的宽度需要变成非固定的
类似资料：
-
看看这两个输出的为什么不一样？
-
我想知道粘性和非粘性会议之间的区别。我从网上读到的： 粘滞：只有一个会话对象将在那里。 非粘性会话：每个服务器节点的会话对象
-
在放开最后一行注释后执行 ： A的引用内存反而降低了，A对B的引用好像并没有解除，为什么会降低内存了？ 为什么A对象的内存降低了呢
-
以下代码在 chrome 输出 1,2,3 这个在网上找到了,forEach 一开始就已经获取了 数组长度 The range of elements processed by forEach is set before the first call to callbackfn. Elements which are appended to the array after the call to
-
打印2的位置 怎么解释呢
-
上面是代码，想执行'person1.func3()'。 结果如下图