My goal is to have a new div generated and inserted over the other elements on the page when a button is clicked. Here is the markup I've written:
<div id="parent">
<div id="d1">
</div>
<div id="d2">
</div>
<div id="d3">
</div>
<input type="button" id="but"/>
</div>
Here are the styles:
#d1{
width:200px;
height:200px;
background-color: black;
}
#d2{
width:200px;
height:200px;
background-color: aqua;
}
#d3{
width:200px;
height:200px;
background-color: blue;
}
And here is the script I'm using:
var but=document.getElementById("but");
var d3=document.getElementById("d3");
var p=document.createElement("div");
p.setAttribute("style", "position:absolute; top:400, background-color: grey;width:10px; height:10px;");
var parent= document.getElementById("parent");
but.onclick=function(){
parent.insertBefore(p,d3);
}
However, when I click the button, the new div gets inserted under the other divs instead of over them. You can see an example of this behavior in this jsFiddle. How can I fix this issue?