[answered] How to manipulate HTML "layers"?

Question

I don't mean the "layer" attribute, but I don't know how to call it. Let me give you an example code: https://code.sololearn.com/WXRjLNQwGZxp/?ref=app
In this code the circle (div2) is shown on the square (div1) because div2 is defined after div1.
My question: Is there a way to change this order?
Now it's "div1, div2" and when I add a div3 through JavaScript (document.body += "<div id=\"div3\"></div>"), it's "div1, div2, div3" (div3 is on the "top"). Is there a way to change that so that div1 is always at the top (then it would be "div2, div3, div1")?

Answer 1

C. Scheler
What you are referring to as "layer" is called "z-index"

the element with higher z-index is always placed in front of elements with lower index.

you can change it using both css and js:

●css way:

#div1{
z-index:1;
}

●js way:
document.getElementById('div1').style['z-index']="1";

you can read more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index