css布局（position: fixed和position: sticky）

position: fixed

• 固定位置：元素的位置相对于视口（浏览器窗口），即使页面滚动，元素的位置也不会变化。
• 脱离文档流：元素脱离了常规的文档流，因此不会影响或被其他元素影响。
• 常用于：创建固定的导航条、按钮或工具栏，例如网站顶部的固定导航菜单。

.fixed-element {
  position: fixed;
  top: 0; /* 距离视口顶部 0 像素 */
  right: 0; /* 距离视口右侧 0 像素 */
}

 position: sticky

• 粘性定位：元素的定位是相对于其最近的滚动祖先的容器（如果没有则是视口）。元素在页面滚动到某个位置时会“粘住”，即固定在一个位置，直到它的容器滚动出视口外。
• 文档流：元素仍然参与文档流，正常占据空间，滚动的行为会影响其在文档中的位置。
• 常用于：创建滚动到特定位置时固定的标题栏、表头等效果。

.sticky-element {
  position: sticky;
  top: 0; /* 距离其滚动容器顶部 0 像素 */
}

主要区别

• 位置的相对性：

  • fixed 是相对于视口的，固定在视口的指定位置。
  • sticky 是相对于最近的滚动祖先容器的，粘性定位会在特定滚动位置“固定”元素。

• 脱离文档流：

  • fixed 元素脱离了文档流，其他元素不会受到它的影响。
  • sticky 元素仍然参与文档流，位置依赖于其滚动容器的相对位置。

• 使用场景：

  • 使用 fixed 来创建永久可见的元素，比如固定的导航栏或按钮。
  • 使用 sticky 来创建在滚动到一定位置时才固定的元素，例如表头或侧边栏。