how to activate the background div element?

Question

i have two div elements ,box_1 and box_2:

<div id="box_1" style="position:absolute;top:0;left:0;width:500px;height:500px;border:1px solid gray;z-index:2;">
</div>

<div id="box_2" onclick="alert(1);" style="position:absolute;top:0;left:0;width:300px;height:300px;background-color:red;z-index:1;">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>

check it >>> demo

how to activate box_2 ? (do not inner #box_1,and z-index less than box_1)

activate == show alert(1) when click box_2

thank you :)

Answer 1

You've done the right thing except box_1 is transparent so box_2 is showing through. If you give box_1 a background color like blue you'll see it appears on the top.

<div style=";width:500px;height:500px;border:1px solid gray;z-index:2;background:blue;" id="box_1">
</div>

<div style="width:300px;height:300px;background-color:red;z-index:1;" id="box_2" onclick="alert(1);">
how to activate me?(do not inner #box_1,and z-index less than box_1)
</div>