为什么生成的元素出现在其父元素下方？答案

【问题标题】：Why are generated elements appearing below their parent element?为什么生成的元素出现在其父元素下方？
【发布时间】：2021-02-04 05:00:56
【问题描述】：

在这个repl.it 中，SKY（由脚本生成）挡住了绿块和字符。

期望的输出：让“天空”和“地面”位于角色和绿色方块的后面。

有人可以解释为什么会发生这种情况以及如何解决它吗？我尝试了各种方法，例如更改 CSS 文件中的顺序，但没有任何区别。

var block = document.getElementById("block");
var hole = document.getElementById("hole");
//add this for the setInterval function
var character = document.getElementById("character");

hole.addEventListener('animationiteration', () => {
  var random = -((Math.random() * 300) + 150);
  var top = (random * 100) + 150;
  hole.style.top = random + "px";
});

//interval function runs every 10 milliseconds
setInterval(function() {
  var characterTop =
    parseInt(window.getComputedStyle(character).getPropertyValue("top"));
  character.style.top = (characterTop + 3) + "px";

}, 10);

* {
  padding: 0;
  margin: 0;
}

#game {
  width: 400px;
  height: 500px;
  border: 1px solid greenyellow;
  margin: auto;
  overflow: hidden;
}

#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;
}

.sky {
  background-color: aqua;
  width: 400px;
  height: 500px;
  position: relative;
}

.ground {
  background-color: brown;
  width: 400px;
  height: 100px;
  position: relative;
  top: 500px;
}

<div class="sky">
  <div class="ground">
    <div id="game">
      <div id="block"></div>
      <div id="hole"></div>
      <div id="character"></div>
    </div>
    
    <script src="script.js"></script>
  </div>
</div>

【问题讨论】：

我的网络阻止了 repl.it。你能张贴一张它应该是什么样子的静止图像吗？
它应该是什么样子？我已经解释了，希望很清楚，期望的输出是什么。目前 SKY 或 GROUND 会覆盖（阻挡、放置）其他元素 - 例如角色和绿色块。
你在哪里解释过？我看没有这样的描述。上面只有三句话。
this 是想要的结果吗？如果是，我会发布一个答案来解释您所做的更改和错误。编辑：Idk 如果该链接按预期工作，则从未使用过 Repl。
那太好了。如果您可以提供详细的解释（对于初学者），将不胜感激。我也会改进我的问题。

标签： javascript html css

【解决方案1】：

正如您在 cmets 中回复的那样，我将详细解释我在 this repl 中所做的更改。

我做的第一件事是改变你的 HTML 结构

<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 id="game">      
    <div class="sky"></div>
    <div id="block"></div>
    <div id="hole"></div>
    <div id="character"></div>
</div>
<div class="ground"></div>

注意：我将使用它们的 #id 选择器来引用 div。

使用该结构，您可以将position: absolute 应用于您的#sky div，然后使用inset: 0、width: 100% 和height: 100% 属性更改其位置和大小，使其覆盖整个@987654332 @分区。我还申请了z-index-1，以便它显示在其他内容下方（我将在答案末尾包含所有这些属性的参考和简短说明）。

您可以看到，我还将#ground 定位在#game 下，然后重复属性margin: auto 和width: 400px 以使其与#game 对齐。我不会这样调整，但由于我不知道你的意图，我试图尽量减少更改。

参考资料：

inset：top; bottom; left; right的简写

z-index 定义 DOM 渲染的顺序。

我已经修复了一些错误，例如您的 js 代码中的语法错误（第 14 行中的额外括号）和缺少结束标记，始终关闭 div 标记！

我会在cmets中回答其他问题。

编辑：我不擅长解释：c

【讨论】：

【解决方案2】：

你不需要天空元素，你可以为#game定义一个#game { background-color: aqua; ... }
使用Absolute（位置）来定义一个元素在相对元素中的特定位置
定义了天空和地板的 z 索引（z 轴）。我已经解决了这支笔的问题：

https://codepen.io/emmanuelpaul/pen/qBqOxRX

【讨论】：

另一个问题，来自一个无用的用户的一些愚蠢的 cmets，在这里 > 如果你能，请看看:) stackoverflow.com/questions/66035313/…

【解决方案3】：

确保你所有的html 标签都在正确的位置，css 的放置没有太大的区别。

HTML 应该类似于：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>FlappyBird</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>

    <div class="sky">
    <div class="ground">


    <div id="game">
      
     
      <div id="block"></div>
      <div id="hole"></div>
      <div id="character">
        
      </div>
</div>
    <script src="script.js"></script>
  </body>
</html>

CSS

*{
  padding:0;
  margin:0;
  
}

#game{
  width:400px;
  height:500px;
  border: 1px solid greenyellow;
  margin:auto;
  overflow:hidden;
}


#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:aqua; /* Added these */
  position: relative;
  left:400px;
  top:-500px;
  animation:block 2s infinite linear;

}



.sky{
  background-color:aqua;
  width:400px;
  height:500px;
  position: relative;
}

.ground{
  background-color:brown;
  width:400px;
  height:100px;
  position: relative;
  top-padding:500px; /* Added these */
}

JS

var block = document.getElementById("block");
var hole = document.getElementById("hole");
//add this for the setInterval function
var character=document.getElementById("character");

hole.addEventListener('animationiteration',() => {
  var random = -((Math.random()*300)+150);
  var top=(random*100)+150;
  hole.style.top=random +"px";
});

//interval function runs every 10 milliseconds
setInterval(function(){
  var characterTop = 
  parseInt(window.getComputedStyle(character).getPropertyValue("top"));
  character.style.top=(characterTop+3)+"px";
  
  },10);

Here 是我的示例表单 codepen.io

希望它对您有所帮助，如果这是您要找的，请告诉我！

【讨论】：

我不满意的相关问题 > stackoverflow.com/questions/66035313/…