為什麼我的固定標題會向下移動，如何解決？

當我將其固定時，標題會下移

在這裡，您遇到了一個稱為邊距折疊的問題。當您將標題設為位置：固定時，它會從文件的正常流程中刪除，從而使以下元素（在本例中為表單）的上邊距與正文的上邊距折疊在一起。這是 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中文網其他相關文章！