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

Answer 1

I don’t fully understand your question. The way you’ve got those boxes styled, the only way to get that <div> to be clickable is to give it a “z-index” value larger than 2.

Alternatively, you could give the other <div> a “z-index” value less than 1, or hide it.

If you can’t change the markup, then the only thing you can do is catch events on the top <div> and forward them to the covered-up <div>. That’s pretty easy with jQuery — just add handlers to the top <div> and use “.trigger” to forward the events.

edit — like this maybe:

$('#box_1').click(function() {
  $('#box_2').trigger('click');
  return false;
});

Now that’s going to catch events from all over the top <div>. You could check the event mouse coordinates to see whether they’re inside the bottom <div> before triggering the event.