JavaScript要素の背後にHTML要素が隠れているのはなぜですか？

Question

JavaScriptを使用して要素（例：div）を作成し、containerのクラスでdivに追加すると、コンテナクラス（この場合は画像）のすべてがまっすぐになりますトップ。この場合の画像は、containerクラスのdivの下に座っています。私は正直なところ、なぜこれが私が思うように動作していないのか分からない。私は純粋なhtmlとcssで全く同じことを作っています。うまくいきました。JavaScriptですべての要素を作成しただけで、正しく見えませんでした。

Jsfiddleは、以下のコードと同じコードです。

var container = document.getElementById('container'); 
 
var child = container.getElementsByClassName('block'); 
 
for (var i = 0; i < 21; i++) { 
 
\t 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

を、次の試してみてくださいposition: absolute 。

絶対的に配置された要素は、ページの流れから取り出されますが、基本的には「空間」を占有しないことを意味します。技術的には、#containter以下の画像ではなく、その画像の上にある#conainerです。

解決策：#containerをposition: relativeとします。また、overflow: hiddenまたはclearfixを入力して、float: left子どもがあふれないようにします。

Answer 2

私は私が正しくあなたの質問を理解してかどうかわからないんだけど、私はあなたの問題は、あなたの#containerであるという事実に起因すると考えてい

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