Alex Alex - 2 months ago 23
CSS Question

Why is the HTML element hiding behind javascript generated elements?

I am having an issue where when I create an element (Ex:

) with JavaScript and then append that to the
with the class of
everything below the container class (which in this case is the image) goes straight up to the top. I would like to see the image in this case sit underneath the
with the
class. I honestly do not know why this is not working the way that I would think it would. I have made the exact same thing with pure html and css and it worked fine it is just when I create all of the elements with JavaScript were things do not look right.

Here is a Jsfiddle with the same code as below.

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);

#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="">


I'm not sure if I understand your question correctly, but I believe that your issue stems from the fact that your #container is position: absolute.

Absolutely positioned elements are taken out of the flow of the page, witch basically means that they don't take up any "space". Technically, its not the image that sits below #containter, its #conainer that sits above the image.

Solution: Give #container a position: relative. Also, give it an overflow: hidden or a clearfix to stop the float: left children from overflowing.