HTML/CSS固定头部页面内容偏移求助：内容未显示于头部下方

我制作了一个仅使用HTML和CSS的网页，其中包含一个固定头部区域。原本预期显示在头部下方的文本，却从页面顶部开始显示，请问这是什么原因？目前可见的问题是，内容从页面顶部中央开始，而非标题区域的下方。

相关代码如下：

.divBackground {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  bacground-image: url("Tea/Dogwood.jpg");
  background-attachment: fixed;
}

.divContent {
  position: fixed;
  top: 40px;
  left: 300px;
  bottom: 40px;
  right: 80px;
  overflow: scroll;
  scrollbar-color: #FFFFC0 #FFFFC0;
}

.divTitle {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 1000;
}

.divHeading {
  font-family: Cinzel;
  font-size: 50px;
}

divFancy {
  font: Ballet;
  font-size: 75px;
}

.divBallet {
  font-family: "Ballet", cursive;
  font-size: 100px;
  font-weight: 600;
  font-style: normal;
  line-height: 70px;
  height: 65px;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0//EN">
<HTML>

<HEAD>
  <meta name="description" content="A Gentleman's Guide To A Ladies' Tea">
  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ballet:opsz@16..72&family=Cinzel:wght@400..900&display=swap" rel="stylesheet">
  <TITLE>A Gentleman's Guide to Ladies' Tea</TITLE>
</HEAD>

<BODY TEXT="#A50D09" LINK="#361ABA" VLINK="#A50D09" ALINK="#FF0000" background="Tea/Dogwood.jpg" style="background-attachment:fixed;">
  <center>
    <div class="divBackground">
      <div class="divTitle">
        <div class="divHeading">
          <br>
        A Gentleman's Guide
          <br>
        To A
          <br>
        </div>
        <div class="divBallet">
          Ladies' Tea
        </div>
      </div>
    </div>
    <div class="divContent">
      Frog
    </div>
</BODY>

</HTML>

1. 固定定位的top值设置错误：.divContent使用position: fixed且top: 40px，但头部.divTitle的高度是100px，40px的top值远小于头部高度，导致内容与头部重叠，视觉上像是从页面顶部开始。
2. 冗余的固定定位元素：.divBackground和.divTitle都设置了position: fixed且top:0，两者叠加；同时body也设置了背景图，造成样式冗余。
3. CSS拼写错误：.divBackground中的bacground-image拼写错误，应为background-image。
4. 未闭合的HTML标签：<center>标签未闭合，可能引发布局异常。

1. 调整内容区域的定位 #

如果希望内容跟随文档流布局，将.divContent的固定定位改为相对定位，并用margin-top避开头部高度：

.divContent {
  position: relative;
  margin-top: 120px; /* 比头部高度多20px预留间距 */
  left: 300px;
  bottom: 40px;
  right: 80px;
  overflow: scroll;
  scrollbar-color: #FFFFC0 #FFFFC0;
}

如果需要保留固定定位，将top值设为头部的高度：

.divContent {
  position: fixed;
  top: 100px; /* 匹配头部.divTitle的高度 */
  left: 300px;
  bottom: 40px;
  right: 80px;
  overflow: scroll;
  scrollbar-color: #FFFFC0 #FFFFC0;
}

2. 清理冗余背景设置 #

删除.divBackground的固定定位（或直接删除该元素，因为body已设置背景图），同时修正CSS拼写错误：

.divBackground {
  width: 100%;
  background-image: url("Tea/Dogwood.jpg"); /* 修正拼写错误 */
  background-attachment: fixed;
}

3. 修正HTML标签结构 #

在.divContent的闭合标签后添加</center>，确保标签闭合：

<div class="divContent">
  Frog
</div>
</center>
</BODY>

内容的提问来源于stack exchange，提问作者Mike Calo