内容覆盖了固定在顶部的头部

前端开发 2026-07-09

我有一个网页，只使用CSS和 HTML。其中有一个固定头部区域。原本应该出现在头部下方的文本却从页面顶部开始显示。为什么？

正如你所看到的问题是，内容从页面顶部居中开始，而不是在标题下方

代码如下：

.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:[email protected]&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ballet:[email protected]&family=Cinzel:[email protected]&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>

解决方案

原本应该在头部下方显示的文本却从页面顶部开始显示。为什么？

这只是因为

.divContent {
  position: fixed;
  top: 40px;

你已经明确告诉它在页面上的确切位置。其他一切放置的位置对它来说无关紧要。如果你不想让它在那里，那么你必须改变固定位置，或改变你的做法。

一个解决方案只是把它向下推到头部的预期高度的位置：

.divContent {
  position: fixed;
  top: 320px;

演示：

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

.divContent {
  position: fixed;
  top: 320px;
  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:[email protected]&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ballet:[email protected]&family=Cinzel:[email protected]&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>

请注意，这可能并不完美，因为你在表达绝对字体大小并让那些部分超出它们自己的容器。也许进行更大范围的重新设计更有意义，但这能回答你当前的问题。

附注：顺便说一句，<center> 标签已被弃用，不应再使用

我也建议不要把某些样式属性直接放在元素上（就像你在body标签上那样）。如果把所有样式规则放在CSS块中，而不是散落在代码的不同部分，管理代码和排查问题会更容易。

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。