CSS 中子元素在相对于父元素而不是视口的”fixed”位置，为什么

在本文中，我们将介绍为什么 CSS 中将子元素使用 “fixed” 定位属性时，子元素的位置是相对于父元素而不是视口进行定位的原因。

阅读更多：CSS 教程

CSS 定位属性

在 CSS 中，有几种定位属性用于控制元素的位置，其中之一是 “fixed”。当我们将一个元素的定位属性设置为 “fixed” 时，该元素的位置将相对于视口进行定位。视口是指当前页面中可见的区域，通常是浏览器窗口的大小。

父元素的定位

然而，在某些情况下，如果将父元素的定位属性设置为非默认值（如 “relative” 或 “absolute”），子元素的 “fixed” 定位将相对于父元素而不是视口进行定位。

这是因为当一个元素具有非默认定位属性时，它将成为“容器元素”。容器元素的作用是为其子元素提供一个相对于容器元素而不是视口的参照点进行定位。所以，当子元素的定位属性设置为 “fixed” 时，它将相对于容器元素而不是视口进行定位。

让我们通过一个示例来说明这个概念。假设我们有一个 HTML 结构如下：

<div class="container">
  <div class="fixed-element"></div>
</div>

.container {
  position: relative;
  height: 200px;
  width: 200px;
}

.fixed-element {
  position: fixed;
  top: 50px;
  left: 50px;
  height: 100px;
  width: 100px;
}

在上面的示例中，子元素 .fixed-element 的定位属性设置为 “fixed”，但是它的位置是相对于父元素 .container 而不是视口进行定位的。这是因为父元素 .container 的定位属性被设置为 “relative”，它成为了子元素 .fixed-element 的容器元素。

子元素的定位修饰符

有时候，即使父元素没有显式地设置定位属性，子元素仍然相对于父元素进行定位，而不是视口。这是因为父元素的某些其他属性（例如 transform 或 filter）可能触发了“块格式化上下文”（BFC）或“层叠上下文”，这也会影响子元素的定位行为。

在这种情况下，我们可以使用 will-change 属性来将子元素的定位修饰符强制设置为视口。例如：

.container {
  will-change: transform;
}

上面的 CSS 代码将 .container 元素的 will-change 属性设置为 transform，这将强制子元素 .fixed-element 的定位属性相对于视口进行定位，而不是相对于父元素。

总结

在 CSS 中，子元素的 “fixed” 定位是相对于父元素而不是视口进行定位的原因是：父元素如果具有非默认定位属性（如 “relative” 或 “absolute”），它将成为子元素的容器元素，子元素将相对于容器元素进行定位。此外，父元素的其他属性可能会触发块格式化上下文（BFC）或层叠上下文，也会影响子元素的定位行为。通过使用 will-change 属性，我们可以强制将子元素的定位修饰符设置为视口，而不是相对于父元素进行定位。