Question

我遇到一个问题，当我使用JavaScript创建一个元素（例如：div），然后将其附加到div，类container下面的容器类下面的所有内容（在这种情况下是图像）直接上升到顶部。我希望看到这种情况下的图片位于div下container类的下方。老实说，我不知道为什么这不符合我的想法。我用纯粹的html和css做了完全相同的事情，它工作得很好，就在我用JavaScript创建所有元素的时候看起来不对。

以下是Jsfiddle，其代码与以下相同。

var container = document.getElementById('container');
var child = container.getElementsByClassName('block');
for (var i = 0; i < 21; i++) {
	var board = document.createElement('div');
  board.setAttribute('class', 'block');
  board.setAttribute('id', i + 1);
  document.getElementById('container').appendChild(board);
}

#container {
  position: absolute;
  display: block;
  border: 2px solid red;
  width: 388px;
}

.block {
  position: relative;
  display: block;
  margin-left: 8px;
  margin-top: 8px;
  float: left;
  border: 2px solid #95a5a6;
  width: 64px;
  height: 64px;
}

<div id="container"></div>
<img src="https://placeimg.com/100/100/any">

Answer 1

我不确定我是否正确理解了您的问题，但我相信您的问题源于您的#container是position: absolute。

绝对定位的元素从页面流中取出，女巫基本上意味着它们不占用任何“空间”。从技术上讲，它不是位于#containter下方的图像，而是位于图像上方的#conainer。

解决方案：为#container提供position: relative。另外，给它一个overflow: hidden或一个clearfix来阻止float: left个孩子溢出。

Answer 2

请尝试以下

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

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

2 个答案: