Warum versteckt sich das HTML-Element hinter Javascript-Elementen?

Question

Ich habe ein Problem, wenn ich ein Element (Ex: div) mit JavaScript erstellen und dann an die div mit der Klasse container alles unterhalb der Container-Klasse (die in diesem Fall ist das Bild) direkt an die Spitze. Ich möchte das Bild in diesem Fall unter der div mit der container Klasse sitzen sehen. Ich weiß ehrlich nicht, warum das nicht so funktioniert, wie ich es mir vorstellen würde. Ich habe die gleiche Sache mit reinem HTML und CSS gemacht und es funktionierte gut, es ist nur wenn ich alle Elemente mit JavaScript erstellen, wo die Dinge nicht richtig aussehen.

Hier ist ein mit dem gleichen Code wie folgt.

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

Ich bin nicht sicher, ob ich Ihre Frage richtig verstanden habe, aber ich glaube, dass das Problem rührt von der Tatsache, dass Ihr #container ist position: absolute .

Absolut positionierte Elemente werden aus dem Seitenfluss entfernt, was bedeutet, dass sie keinen "Platz" einnehmen. Technisch ist es nicht das Bild, das unter #containter sitzt, sein #conainer, das über dem Bild sitzt.

Lösung: Geben Sie #container eine position: relative. Geben Sie auch ein overflow: hidden oder ein Clearfix, um die float: left Kinder vom Überlaufen zu stoppen.

Answer 2

Bitte versuchen Sie folgende

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