CSS 为什么在 Chrome 中没有定位：粘性工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15646747/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why doesn't position: sticky work in Chrome?
提问by Petah
How do you get position: stickyworking?
你怎么开始position: sticky工作？
I tried the following in Chrome 26.0.1410.43 m and it's not working:
我在 Chrome 26.0.1410.43 m 中尝试了以下操作，但它不起作用：
thead {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
}
According to this, it should work:
据此，它应该工作：
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
It seemed to be supported in Chrome 23.0.1247.0, but now it doesn't work in 26.0.1410.43 m.
Chrome 23.0.1247.0 似乎支持它，但现在它在 26.0.1410.43 m 中不起作用。
采纳答案by AlienWebguy
EDIT: You need to launch with --enable-experimental-webkit-featuresflag enabled via about:flags.
编辑：您需要--enable-experimental-webkit-features通过启用标志启动about:flags。
Update:This does not work on Chrome v35 through v51, Chrome 52 reenables this with the experimental web platform features flag. Starting from Chrome 56 position: stickyworks out of the box.
更新：这在 Chrome v35 到 v51 上不起作用，Chrome 52 使用实验性网络平台功能标志重新启用它。从 Chrome 56 开始position: sticky即可使用。
回答by TylerH
For a short time, Chrome enabled this feature behind a flag, --enable-experimental-webkit-features, in their about:flags section. However, it was shortly removed due to inefficiencies in how the browser was repainting.
在很短的时间内，Chrome--enable-experimental-webkit-features在其 about:flags 部分中的标志后面启用了此功能。但是，由于浏览器重新绘制的方式效率低下，它很快就被删除了。
As of Chrome 56, this feature is enabled without a flag once again.
从Chrome 56 开始，此功能再次在没有标志的情况下启用。
As of Chrome 52.0.2743.116, this feature is enabled by the flag --enable-experimental-webkit-featuresonce more.
从 Chrome 52.0.2743.116 开始，此功能--enable-experimental-webkit-features再次由标志启用。
To answer the updated question about why it was removed: Google (Chromium) removed support for position: stickydue to the unfinished nature of the spec, and they will focus on other scrolling features in the mean-time:
要回答有关为什么删除它的更新问题：position: sticky由于规范的未完成性质，Google (Chromium) 删除了对 的支持，同时他们将专注于其他滚动功能：
"We would eventually like to implement position: sticky, but the current implementation isn't designed in a way that integrates well with the existing scrolling and compositing system. For example, position: sticky relies upon updateLayerPositionsAfterDocumentScroll to function correctly, but that function has no other purpose and can otherwise be removed. Similarly, position: sticky doesn't work at all with composited overflow scrolling, which is now the default mechanism for driving scrolling in the engine.
Once we've got our scrolling and compositing house in order, we should return to position: sticky and implement the feature in a way that integrates well with the rest of the engine. For now, however, this CL removes our current implementation so we can focus on improving our implementation of the scrolling features we've already shipped."
“我们最终希望实现 position:sticky，但当前的实现并没有以与现有滚动和合成系统很好地集成的方式设计。例如，position:sticky 依赖于 updateLayerPositionsAfterDocumentScroll 才能正常运行，但该功能具有没有其他目的，否则可以删除。类似地，位置：粘性对合成溢出滚动根本不起作用，现在这是引擎中驱动滚动的默认机制。
一旦我们将滚动和合成房子整理好，我们应该回到 position:sticky 并以与引擎的其余部分很好地集成的方式实现该功能。但是，就目前而言，此 CL 删除了我们当前的实现，因此我们可以专注于改进我们已经发布的滚动功能的实现。”
Emphasis mine. You can read more about it here.
强调我的。您可以在此处阅读更多相关信息。
回答by RWAM
FilamentGroup released a nice polyfill for position: sticky. Have a look at: https://github.com/filamentgroup/fixed-sticky
FilamentGroup 为position: sticky. 看看：https: //github.com/filamentgroup/fixed-sticky
回答by user1414673
It seems that it doesn't work on iOS7 Safari if there is a parent node with overflow: hiddenproperty set.
如果有一个overflow: hidden设置了属性的父节点，它似乎在 iOS7 Safari 上不起作用。
回答by Bice
When Chrome switched over to the Blink rendering engine with version 28, they dropped Webkit, which is the only engine to support this (on Mac and iOS.)
当 Chrome 切换到版本 28 的 Blink 渲染引擎时，他们放弃了 Webkit，这是唯一支持此功能的引擎（在 Mac 和 iOS 上）。
So unless you're using Safari on Mac or iOS, or Chrome on iOS (for now) you will not be able to support this in other browsers.
因此，除非您在 Mac 或 iOS 上使用 Safari，或者在 iOS 上使用 Chrome（目前），否则您将无法在其他浏览器中支持此功能。
Sad, it's a great and easy way to float elements.
可悲的是，这是浮动元素的好方法。
回答by Taras Yaremkiv
The great newsis that as of Chrome 56 (currently beta as of December 2016, stable in Jan 2017) position: sticky is now back in Chrome.
So, in the near future only Edge would be the only one of all browsers that hasn't implemented it still, except browsers for mobile devices, but I hope they would implement it also soon.
的好消息是，随着Chrome的56（目前是测试版为2016年12月的，2017年1月稳定）位置：粘稠现在回到在Chrome中。
因此，在不久的将来，只有 Edge 将是所有尚未实现它的浏览器中唯一一个，除了用于移动设备的浏览器，但我希望他们也能尽快实现它。
回答by hoima
It does - now at least Look up https://caniuse.com/#feat=css-sticky
它确实 - 现在至少查找https://caniuse.com/#feat=css-sticky
You are targeting the <thead>while Chrome and the Blink engine(Chrome, Edge, Opera) does not support this. Gecko(Mozilla Firefox) and Webkit(Safari) does. Instead try to target the <th>instead as shown below.
您的目标是<thead>Chrome，而 Blink 引擎（Chrome、Edge、Opera）不支持此功能。Gecko（Mozilla Firefox）和 Webkit（Safari）可以。而是尝试将目标<th>改为如下所示。
Also overflow: hiddenon a parent WILL break position:sticky
同样overflow: hidden在父母身上会打破position:sticky
Be sure to include your vendor prefixes.
请务必包括您的供应商前缀。
Run the snippet and it should show a functional sticky header.
运行代码段，它应该显示一个功能性的粘性标题。
thead > tr > th {
background: white;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
}<h1>Position sticky</h1>
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>