position: fixed总是将一个元素固定在滚动容器或视口中的某个位置。无论你如何滚动它的容器，它都将保持在完全相同的位置，并且不影响容器中其他元素的流动。
在这里不做详细介绍，position: sticky的行为基本上与position: relative类似，直到一个元素滚动超过一个特定的偏移量，在这种情况下，它会变成position: fixed，导致元素“粘”在它的位置上，而不是滚动到视图之外。当它滚动回原来的位置时，它最终会松开。至少，这是我在理论上的理解。
我不想详细讨论的原因是因为position: sticky是一个全新的、实验性的（如你链接到的文档所示），而且还没有最终完成。即使我上面所说的在不久的将来也可能会改变。无论如何，你还不能使用position: sticky（希望明年会改变）。
Mozilla最近展示了position: stickyhere的实现，非常值得一看。

请参阅这个不言自明的示例以获得更清晰的说明。CODEPEN

固定位置：

1.具有固定位置的元素相对于 windows 或浏览器窗口本身显示。即使页面滚动，它也始终停留在同一位置。
1.它不影响页面中其他元素的流动，即不占用任何特定的空间（就像position: absolute）。
1.如果它被定义在其他容器中（div有或没有相对/绝对位置），它仍然相对于浏览器而不是那个容器定位。（这里它与position: absolute不同）。

粘滞位置：

1.带有粘性位置的元素是根据用户的滚动位置来定位的。正如@Boltclock提到的，它的作用基本上类似于position：直到元素滚动超过特定偏移量，在这种情况下，它将转换为位置：固定。当它被向后滚动时，它会回到它先前的（相对）位置。
1.它影响页面中其他元素的流动，即在页面上占据特定空间（就像position: relative）。
1.如果它是在某个容器中定义的，它的位置就相对于该容器。如果容器有溢出（滚动），它将根据滚动偏移量变为position：fixed。
因此，如果您希望在容器内实现固定功能，请使用sticky。

让我把它说得非常简单。
fixed位置不会占用正文中的任何空间，因此下一个元素（例如：图像）将在固定元件之后。
sticky位置会占据空间，因此下一个元素不会隐藏在它后面。
下图是fixed，因为固定元素不占空间，所以图像的某些部分隐藏在导航栏后面。您可以通过添加边距或在伪类之前/之后来解决这个问题

这个例子位于sticky位置。在这里，图像完全显示，没有任何东西隐藏在导航栏后面，因为粘滞元素占据了文档中的空间。

假设您的网站顶部有一个导航栏，并且您希望它是固定的，以便当您向下滚动页面时，它始终可见。
如果你给予它position: fixed;，那么页面顶部的内容将隐藏在导航栏下面;相反，如果你决定给它position: sticky; top: 0;，导航栏将保持在文档流中，并优雅地将其下面的内容推到下面，所以没有内容被隐藏。
当您套用position: fixed;时，导览列会从一般文件流程中逸出，类似于您套用float元素时的情形。

1. fixed固定在X轴和Y轴上，而sticky仅固定在X轴上。
2. sticky将被固定到容器的末尾，但是fixed将被固定到网页的末尾。

Fixed和Sticky非常相似，但它们之间有一个重要的区别-
**1.位置：固定：**使用上、下、左、右直接将元素固定在指定的位置。

<div style="position:relative">
<p style="position:fixed; top:0px">paragraph with fixed position</p>
</div>

-此处位置固定的段落将始终固定在顶部：0 px。
**2. position：sticky：**它不会直接将元素固定在指定位置。它最初会滚动移动元素。只有当元素使用上、下、左、右到达指定位置时，它才会固定元素。直到它会滚动移动。

<div style="position:relative">
<p style="position:sticky;top:0px">paragraph with sticky position</p>
</div>

-此处，具有粘滞位置段落将被固定或仅当元素到达顶部0 px位置时才粘滞