代码之家 › 专栏 › 技术社区 › Compoot

为什么生成的元素出现在其父元素下方?

css html javascript

Compoot · 技术社区 · 4 年前

在这个 repl.it 天空(由脚本生成)正在遮挡绿色块和字符。

期望输出:字符和绿色块后面的“天空”和“地面”。

有人能解释一下为什么会发生这种情况以及如何解决吗?我尝试过各种方法,比如更改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>

0 回复 | 直到 4 年前

Gunther 4 年前

正如你在评论中回复的那样,我将对我在 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>

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

有了这个结构,你就可以应用 position: absolute 到你的 #sky div,然后使用 inset: 0 , width: 100% 和 height: 100% 属性更改其位置和大小,使其覆盖整个 #game 我也申请了 z-index-1 以便它显示在其他内容下方(我将在答案末尾包括对所有这些属性的参考和简短解释)。

你可以看到我也定位了 #ground 下面 #游戏 然后重复这些属性 margin: auto 和 width: 400px 使其与 #游戏 。我不会这样调整,但由于我不知道你的意图,我试图尽量减少变化。

参考文献:

inset :简写为 top; bottom; left; right

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

我修复了一些错误,比如js代码中的语法错误(第14行中的一个额外括号)和缺少结束标记,总是关闭 div 标签!

我将在评论中回答其他问题。

编辑:我不擅长解释:c

Emmanuel 4 年前

你不需要天空元素,你可以定义一个 #game { background-color: aqua; ... } #游戏
使用Absolute(position)定义相对元素中元素的特定位置
定义了天空和地板的z轴索引。我已经解决了这支笔里的问题:

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

Maximus Shishkin 4 年前

确保你所有的 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

希望它对你有所帮助,如果这就是你想要的,请告诉我!