爲什麼HTML元素隱藏在javascript生成的元素後面？

我有在那裏，當我創建一個元素（例如：div）的問題與JavaScript，然後它添加到div與類container一切容器類（在這種情況下是圖像）以下的就直接高達頂端。我希望看到這個例子中的圖像坐在div的下面，container類。我真的不知道爲什麼這不按照我認爲會這樣的方式工作。我已經用純html和css做了完全相同的事情，它工作的很好，就是當我用JavaScript創建所有元素時，情況看起來不正確。爲什麼HTML元素隱藏在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">

來源

2016-11-29 Alex Lowe

'的appendChild（）'把你的DIV，然後將其放置的父元素的最後一個孩子說的有針對性的.. – zer00ne

如何你想放置的形象呢？在所有的盒子裏面都固定好？ –

@Nandan我想要將圖像放在div容器之外。 –

我不知道如果我正確地理解你的問題，但我相信你的問題的事實，你#container是position: absolute莖。

絕對定位元素取出頁面的流量，巫基本上意味着他們不佔用任何「空間」。從技術上講，它不是位於#containter以下的圖像，其#conainer位於圖像上方。

解決方法：給#container a position: relative。此外，給它一個overflow: hidden或clearfix來阻止兒童溢出。

來源

2016-11-29 22:21:03

非常感謝你完全正確。 –

完全沒問題！快樂的編碼！ :) –

請嘗試以下

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

來源

2016-11-29 22:18:57

爲什麼HTML元素隱藏在javascript生成的元素後面？

回答

相關問題