CSS 边框样式对于 sticky 定位元素无效

在本文中，我们将介绍 CSS 中的边框样式（border style）与 sticky 定位元素的关系。我们将详细说明为什么边框样式对 sticky 定位元素无效，并提供示例来验证这一现象。

阅读更多：CSS 教程

sticky 定位

在了解为何边框样式对 sticky 定位元素无效之前，我们先来了解一下 sticky 定位。sticky 定位是 CSS 中的一种定位方式，当元素滚动到指定位置时，会固定在该位置上。这意味着即使页面滚动，该元素也会一直保持在屏幕上的指定位置上。sticky 定位在实现吸顶效果时非常有用。

要将元素设置为 sticky 定位，需要使用 position: sticky 属性。并通过 top、bottom、left 或 right 属性来指定元素相对于所属容器的位置。

例如，下面是一个简单的示例，展示了如何使用 CSS 将元素设置为 sticky 定位，并指定为屏幕上方 100px 的位置：

.sticky-element {
  position: sticky;
  top: 100px;
}

CSS 边框样式

CSS 提供了丰富的边框样式选项，可以根据需求来设置元素的边框外观。常见的边框样式选项有：none、dotted、dashed、solid、double、groove、ridge、inset 和 outset。我们可以使用 border-style 属性来设置元素的边框样式。

例如，下面的示例展示了如何使用 CSS 设置一个红色边框，边框样式为实线（solid）：

.border-example {
  border-style: solid;
  border-color: red;
}

边框样式对 sticky 定位的影响

然而，当我们在 sticky 定位元素上使用边框样式时，往往会发现这些样式对元素无效。这是由于 sticky 定位元素的特殊行为所导致的。

根据 CSS 规范，sticky 定位的元素在其距离滚动容器顶部的距离超过其高度时将变为 fixed 定位，即固定在窗口的指定位置。在元素成为 fixed 定位之前，任何应用于 sticky 定位元素的边框样式都将不起作用。边框样式将会在元素固定后生效。

为了验证这一现象，我们可以尝试为一个 sticky 定位的元素设置边框样式，并监听元素的滚动事件。

.border-example {
  position: sticky;
  top: 100px;
  border-style: solid;
  border-color: red;
}

.border-example::after {
  content: "Sticky Element";
}

const stickyElement = document.querySelector('.border-example');
window.addEventListener('scroll', () => {
  console.log(stickyElement.getBoundingClientRect().top);
});

当 sticky 元素滚动到指定位置并变为 fixed 定位时，我们可以看到边框样式才会生效。这种行为的原因是为了确保边框在固定定位时能够正确呈现，并避免不必要的布局和渲染开销。