为什么HTML元素隐藏在javascript生成的元素后面？

我遇到了一个问题，当我用JavaScript创建一个元素（例如：

div

），然后用

container

类将其附加到

div

，container类下面的所有内容（在本例中是图像）都会直接上升到顶部。我希望看到本例中的图像位于

div

下，其中包含

容器

类。老实说，我不知道为什么这不是我所认为的工作方式。我用纯html和css做了完全相同的事情，效果很好，只是当我用JavaScript创建所有元素时，事情看起来不太对劲

下面是一个代码与下面相同的示例

var container=document.getElementById（'container'）；
var child=container.getElementsByClassName（'block'）；
对于（变量i=0；i<21；i++）{
var board=document.createElement（'div'）；
board.setAttribute（'class'，'block'）；
board.setAttribute（'id'，i+1）；
document.getElementById（'container'）.appendChild（board）；
}

#容器{
位置：绝对位置；
显示：块；
边框：2倍纯红；
宽度：388px；
}
.街区{
位置：相对位置；
显示：块；
左边距：8px；
边缘顶部：8px；
浮动：左；
边框：2个实心#95a5a6；
宽度：64px；
高度：64px；
}

请尝试以下内容

#container {
 display: block;
 border: 2px solid red;
 width: 388px;
 min-height: 450px;
}

请尝试以下内容

#container {
 display: block;
 border: 2px solid red;
 width: 388px;
 min-height: 450px;
}

---

我不确定我是否正确理解了您的问题，但我相信您的问题源于您的

#容器

是

位置：绝对的

绝对定位的元素从页面流中移除，这基本上意味着它们不会占用任何“空间”。从技术上讲，它不是位于
#container
下方的图像，而是位于图像上方的
#container

解决方案：给
#容器
一个
位置：相对
。另外，给它一个
overflow:hidden
或一个clearfix来阻止
float:left
子对象溢出。
我不确定我是否正确理解了您的问题，但我相信您的问题源于这样一个事实，即您的
#container
是
位置：绝对的

绝对定位的元素从页面流中移除，这基本上意味着它们不会占用任何“空间”。从技术上讲，它不是位于
#container
下方的图像，而是位于图像上方的
#container

解决方案：给
#容器
一个
位置：相对
。另外，给它一个
overflow:hidden
或一个clearfix来阻止
float:left
子元素溢出。
appendChild（）
获取您的div，然后将其作为目标父元素的最后一个子元素。您希望如何放置图像？是否在所有框内修复？@Nandan我希望将图像放置在div容器外部。
appendChild（）
获取您的div，然后将其作为目标父元素的最后一个子元素。您希望如何放置图像？在所有的盒子里都固定好了吗？@Nandan我想把图像放在div容器外面。一点问题都没有！快乐编码！：）没问题！快乐编码！：）