javascript 为什么生成的元素出现在它们的父元素下面？

g6baxovj 于 2023-10-14 发布在 Java

关注(0)|答案(3)|浏览(102)

在这个repl.it中，SKY（由脚本生成）阻塞了绿色BLOCK和CHARACTER。
所需输出：对于“天空”和“地面”的后面的字符和绿色块。
有人能解释一下为什么会出现这种情况以及如何解决吗？我尝试了各种方法，比如改变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>

JavaScript

来源：https://stackoverflow.com/questions/66035084/why-are-generated-elements-appearing-below-their-parent-element

3条答案

按热度按时间

zte4gxcn1#

正如你在评论中回复的那样，我将给予一个详细的解释，我在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%属性来更改其位置和大小，以便它覆盖整个#game div。我还应用了z-index-1，以便它显示在其他内容的下面（我将在答案的最后包括对所有这些属性的引用和简短解释）。
您可以看到，我还将#ground放置在#game下面，然后重复属性margin: auto和width: 400px，使其与#game对齐。我不会这样排列，但因为我不知道你的意图，我试图尽量减少变化。
参考文献：
inset：top; bottom; left; right的简写
z-index定义了DOM渲染的顺序。
我修正了一些错误，比如你的js代码中的语法错误（第14行多了一个括号），缺少结束标签，总是关闭div标签！

赞(0）回复(0）举报 2023-10-14

zlwx9yxi2#

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

赞(0）回复(0）举报 2023-10-14

cmssoen23#

确保你所有的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
希望对你有帮助，让我知道这是不是你要找的！

赞(0）回复(0）举报 2023-10-14

我来回答

javascript 为什么生成的元素出现在它们的父元素下面？

3条答案

相关问题

热门标签

最新问答