小编dam*_*ymq的帖子

当我阅读有关MDN position属性的文章时，这是一个问题。我认为此处sticky描述的行为与实际行为之间存在明显的差异。

根据MDN，固定位置元素将被视为相对位置元素，直到超过指定的阈值为止；当超过阈值时，它们将被视为固定位置元素，直到达到父元素的边界为止（Link）。

粘性定位可以看作是相对定位和固定定位的混合体。粘性定位的元素将被视为相对定位，直到其超过指定的阈值为止，在该点处将其视为固定的，直到其到达其父对象的边界为止。例如...

#one { position: sticky; top: 10px; } 

Run Code Online (Sandbox Code Playgroud)

...将相对位置为id的元素定位到视口滚动之前，以使元素距离顶部小于10个像素。超过该阈值，该元素将从顶部固定为10个像素。

因此，我创建了以下代码并确认了操作。

#one { position: sticky; top: 10px; } 

body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
}

.container>* {
  width: 100%;
}

header {
  background: #ffa;
  height: 130vh;
}

main {
  background: #faf;
  height: 210vh;
}

footer {
  background: #faa;
  height: 8vh;
  position: sticky;
  bottom: 0;
}

.footer {
  background: #aff;
  height: 100vh;
}

根据MDN文章，此代码“是相对放置元素，直到通过滚动视口使元素的位置离视口底部小于0px为止，并且当它离底部大于0px时成为固定的放置元素“ 我刚在想。

但是，结果是“滚动到固定位置元素，直到通过滚动视口使元素的位置从视口的下端开始小于0px为止，并且当从下视点大于0px时成为相对排列的元素结束”。 …