css 如何让 position sticky 脱离文档流

CSS 的 `position: sticky` 属性可以让元素在其祖先元素滚动时保持其相对于视口的位置，就像它被粘贴了一样。但是默认情况下，它并不会脱离文档流，也就是说，它的兄弟元素仍然会占据其原本的空间。如果你想要 `position: sticky` 元素真正地从文档流中独立出来，可以按照以下步骤操作：

1. 将元素的 `position` 设置为 `sticky`，同时设置 `top` 或者 `bottom` 属性来指定元素固定在顶部或底部边界。

   .sticky-element {
     position: -webkit-sticky; /* 对于 Safari 和 Chrome */
     position: sticky;
     top: 0; /* 例如，如果想让它在顶部固定 */
   }

2. 确保元素有一个明确的祖先元素设置了 `overflow-y: scroll`，这样才会触发滚动事件并应用 `position: sticky` 效果。

   .scroll-container {
     overflow-y: auto;
   }

通过这种方式，`.sticky-element` 只会在`.scroll-container` 内部滚动时保持其位置，不会影响其他非 `position: sticky` 的内容布局。