CSS 子元素相对定位为 sticky，而父元素不是 sticky 的行为

在本文中，我们将介绍 CSS 中子元素相对定位为 sticky，而父元素不是 sticky 的行为。CSS 中的 position: sticky 属性可以让元素始终保持在相对位置上，直到滚动到特定位置，然后它将成为固定定位元素。然而，当子元素设置 position: sticky，而父元素并没有设置 position: sticky 时，会出现一些特殊的行为。

阅读更多：CSS 教程

sticky 定位的工作原理

首先，让我们了解一下 position: sticky 的工作原理。当一个元素设置了 position: sticky 属性时，在未触发条件之前，该元素按照正常文档流排列，并且没有任何定位效果。但当滚动到特定位置时，例如父元素的顶部边界到达浏览器的视口顶部时，该元素会“粘”在视口中的相对位置上，不再随滚动而滚动，并且跟随父元素的滚动而相对定位。当窗口滚动超出触发条件范围时，该元素会恢复正常的相对位置。

父元素设置 sticky，子元素设置 sticky 的行为

当父元素没有设置 position: sticky，而子元素设置了 position: sticky 时，子元素的 sticky 行为将基于父元素的边界。换句话说，子元素 sticky 的触发条件是相对于父元素的边界而不是视口。

让我们通过一个示例来说明这个行为。假设我们有一个父元素和一个子元素，父元素具有固定高度且有滚动。父元素没有设置 position: sticky，而子元素设置了 position: sticky 和 top: 0。

<div class="parent">
  <div class="child">
    Sticky child element
  </div>
  <!-- 其他内容 -->
</div>

.parent {
  height: 300px;
  overflow: auto;
}

.child {
  position: sticky;
  top: 0;
}

在这个示例中，当向下滚动页面时，子元素将保持在父元素的顶部，直到它的底部到达父元素的底部。这是因为子元素的 sticky 定位是相对于父元素的边界来计算的。

父元素设置无效的取值

除了设置 position: sticky 之外，父元素还可以设置其他一些有效的 position 值，如 fixed、relative、absolute，或者也可以设置无效的取值如 static、inherit 等。

当父元素设置了无效的取值时，子元素的 sticky 行为将和父元素的设置无关，而是相对于视口的边界来计算的。换句话说，子元素的 sticky 行为将类似于 position: fixed。

让我们再通过一个示例来说明这个行为。假设我们有一个父元素和一个子元素，父元素设置了 position: static，而子元素设置了 position: sticky 和 top: 0。

<div class="parent">
  <div class="child">
    Sticky child element
  </div>
  <!-- 其他内容 -->
</div>

.parent {
  position: static;
}

.child {
  position: sticky;
  top: 0;
}

在这个示例中，不论父元素如何滚动，子元素始终会固定在视口的顶部。因为父元素的 position 属性设置为无效的值，子元素的 sticky 行为将类似于 position: fixed。

子元素设置无效的取值

类似于父元素的情况，子元素也可以设置无效的 position 值，例如 static、inherit 等。当子元素设置了无效的取值时，该子元素将像普通元素一样参与正常的文档流，sticky 定位将不起作用。

让我们通过一个示例来说明这个行为。假设我们有一个父元素和一个子元素，父元素设置了 position: relative，而子元素设置了 position: static。

<div class="parent">
  <div class="child">
    Not a sticky child element
  </div>
  <!-- 其他内容 -->
</div>

.parent {
  position: relative;
}

.child {
  position: static;
  /* 没有设置 top 属性 */
}

在这个示例中，子元素将不会具有 sticky 的行为，它将继续参与正常的文档流排列。

总结

在本文中，我们介绍了 CSS 中子元素相对定位为 sticky，而父元素不是 sticky 的行为。当子元素设置 position: sticky，而父元素没有设置 position: sticky 时，子元素的 sticky 行为将基于父元素的边界计算。如果父元素设置无效的取值，子元素的 sticky 行为将和父元素的设置无关，而是相对于视口的边界计算。同样，如果子元素设置无效的取值，它将不会具有 sticky 的行为，而是继续参与正常的文档流排列。了解这些行为将有助于我们更好地使用 CSS 中的 sticky 定位属性。