为何生成的元素显示在父元素下方？Flappy Bird项目层级问题求解

• HTML嵌套结构不合理
  游戏核心容器#game（内部包含障碍块#block、缝隙#hole、角色#character）被嵌套在背景元素.sky和.ground的内部，直接导致两个连锁问题：
• 定位参照错位：#character是绝对定位元素，会以最近的带定位的祖先（.ground，position: relative）为参照，而不是游戏容器，位置出现偏移。
• 层叠规则干扰：因为.sky和.ground都是带position: relative的定位元素，按照CSS层叠规则，定位元素的绘制顺序天然高于普通流中的非定位元素，即使#game在DOM里写在后面，也会被先绘制的定位背景元素遮挡。
• 未显式定义分层级
  所有元素都使用默认的z-index: auto，层叠顺序完全由DOM结构和元素定位类型决定，无法手动控制背景层和游戏元素的上下关系。这也是调整CSS代码顺序没有效果的原因——CSS代码顺序只影响同优先级的样式覆盖，不改变元素的层叠顺序。

核心思路是拆分嵌套结构、显式用z-index定义分层：

1. 调整HTML结构：将.sky、.ground、#game三个元素设为同级关系，统一放在一个带定位的游戏外层容器中，避免游戏元素被嵌套在背景层内部。调整后的结构示例：

   <!-- 外层定位容器，作为所有元素的定位参照 -->
   <div id="game-container">
     <div class="sky"></div>
     <div class="ground"></div>
     <div id="game">
       <div id="block"></div>
       <div id="hole"></div>
       <div id="character"></div>
     </div>
   </div>
   <script src="script.js"></script>
   

2. 显式设置z-index分层：给不同层级的元素设置明确的z-index值，确保背景层在最下方，游戏元素在上方。调整后的核心CSS代码：

   * {
     padding: 0;
     margin: 0;
   }
   
   /* 外层容器设为相对定位，作为所有子元素的定位参照 */
   #game-container {
     position: relative;
     width: 400px;
     height: 600px;
     margin: auto;
   }
   
   /* 天空层：最底层 */
   .sky {
     background-color: aqua;
     width: 400px;
     height: 500px;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
   }
   
   /* 地面层：位于天空上方，游戏元素下方 */
   .ground {
     background-color: brown;
     width: 400px;
     height: 100px;
     position: absolute;
     top: 500px;
     left: 0;
     z-index: 2;
   }
   
   /* 游戏主容器：最上层 */
   #game {
     width: 400px;
     height: 500px;
     border: 1px solid greenyellow;
     position: absolute;
     top: 0;
     left: 0;
     overflow: hidden;
     z-index: 10;
   }
   
   /* 以下为原有游戏元素的样式，无需额外修改 */
   #character {
     width: 50px;
     height: 50px;
     background-color: rgb(255, 0, 149);
     position: absolute;
     top: 250px;
     border-radius: 50%;
   }
   
   #block {
     width: 50px;
     height: 500px;
     background-color: greenyellow;
     position: relative;
     left: 400px;
     animation: block 2s infinite linear;
   }
   
   @keyframes block {
     0% { left: 400px; }
     100% { left: -50px; }
   }
   
   #hole {
     width: 50px;
     height: 150px;
     background-color: white;
     position: relative;
     left: 400px;
     top: -500px;
     animation: block 2s infinite linear;
   }
   

3. 原有JavaScript逻辑无需修改，调整完成后，天空和地面会作为固定背景层显示在角色与障碍块的下方，不会出现遮挡问题。

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