Alex Alex - 5 days ago 4
CSS Question

Why is the HTML element hiding behind javascript generated elements?

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

div
) with JavaScript and then append that to the
div
with the class of
container
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
div
with the
container
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);
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

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.

Comments