为什么我的固定标题向下移动，如何解决？

当我将其固定时，标题会下移

在这里，您遇到了一个称为边距折叠的问题。当您将标题设置为位置：固定时，它会从文档的正常流程中删除，从而使以下元素（在本例中为表单）的上边距与正文的上边距折叠在一起。这是 HTML 的默认行为。

要避免此问题并保留标题和表单之间的垂直间距，您有两个选项：

1. 禁用边距折叠：

   添加 padding-top: 1px;添加到 CSS 主体以防止边距折叠。这种少量的填充有效地打破了折叠并使表单的边距生效。

2. 设置顶部边距：

   添加顶部：[期望值]；到标题的 CSS 中，以显式设置其相对于视口顶部的垂直位置。这将覆盖折叠的边距并确保您的标题保持在所需的位置。

更新的代码（选项 1）：

body {
  padding-top: 1px; /* disable margin collapsing */
}

更新的代码（选项2):

#header {
  top: 3rem; /* desired vertical position */
}

注意：

如果您使用的是 Bootstrap 或 Materialise CSS 等框架，它们可能已经有规则来处理边缘崩溃。在这种情况下，您可能需要覆盖这些规则或使用替代方法来实现所需的定位。

以上是为什么我的固定标题向下移动，如何解决？的详细内容。更多信息请关注PHP中文网其他相关文章！