HTML页面标题无法置顶求助：Flex布局导致位置异常

问题根源 #

1. HTML结构错误：你把包含标题的<div>放在了<body>标签外面，浏览器会自动将其纳入<body>的子元素，而<body>设置了display: flex，所以这个标题div会和其他container元素作为flex项并排显示。
2. Flex布局方向：<body>的flex-direction默认是row（水平方向），所有子元素会在同一行排列，加上height: 100vh和垂直居中，导致标题被挤到中间区域。
3. ID重复问题：多个容器用了同一个id="container"，这违反HTML规范，ID必须唯一，应该改用class="container"。

修正方案 #

把标题移到<body>内部，调整<body>的flex布局逻辑，同时修正ID重复问题：

<head>
  <style>
    body {
      background-color: #849edb;
      display: flex;
      flex-direction: column; /* 改为垂直方向排列子元素 */
      align-items: center; /* 水平居中所有内容 */
      min-height: 100vh; /* 用min-height避免内容溢出时被截断 */
      margin: 0; /* 清除浏览器默认边距 */
    }
    
    .page-header {
      margin-top: 20px; /* 给标题添加上边距，避免贴顶 */
      margin-bottom: 30px; /* 和下方内容拉开距离 */
      width: 100%;
      text-align: center; /* 让标题文字居中 */
    }
    
    .container { /* 把重复的id改为class */
      background-color: white;
      padding: 20px;
      text-align: center;
      border-radius: 15px;
      width: 15%;
      margin: 10px;
    }

    /* 单独用容器包裹内容卡片，实现水平排列 */
    .content-group {
      display: flex;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div class="page-header">
    <a href='index.html'>
      <img src="casa1.png" alt="" style="position:absolute; left:50px; top: 50px;" />
    </a>
    <h1>Title</h1>
  </div>

  <div class="content-group">
    <div class="container">
      <h2>Sports</h2>
      <p>Text here</p>
    </div>

    <div class="container">
      <h2>Informatics</h2>
      <p>Text here</p>
    </div>

    <div class="container">
      <h2>Arts</h2>
      <p>Text here</p>
    </div>
  </div>
</body>

关键修改说明 #

• 将标题容器移到<body>内部，符合HTML结构规范，确保布局逻辑生效。
• 给<body>设置flex-direction: column，让标题和内容区域垂直排列，标题自然处于页面上方。
• 新增content-group容器专门水平排列三个内容卡片，分离标题和内容的布局逻辑，避免互相干扰。
• 把重复的id="container"改为class="container"，遵循ID唯一性的HTML规范。
• 用min-height: 100vh替代height: 100vh，当内容超出视口时页面可以正常滚动。

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