In Internet Explorer a div without background colour doesn't block mouse interaction with elements below it. Is this wrong?

Question

I sometimes "protect" a custom UI control by placing a transparent div over the top of it. e.g. I have made an interactive data grid, and when I want to disable it, such as when I bring up a dialogue in front of it, I append a transparent div to the grid's outer container, with height and width stretched, so that it is not possible to click on anything. In the contrived example below, someFunction() will not get called when clicking where 'Blah' is, because the span will be covered by a transparent protector.

HTML:

<div class="control">
  <span class="clickable-example" onclick="someFunction()">Blah</span>
  <div class="protector"></div>
</div>

CSS:

.control {
  position: absolute;
  width: 100px;
  height: 20px;
}

.clickable-example {
  z-index: 0;
}

.protector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 20px;
  z-index: 1;
  background: transparent;
}

However, I have noticed that in Internet Explorer (even 10), this doesn't work. It seems that a div with background set to transparent (either explicitly with CSS, or implicitly by not setting it at all), the div does not block what is underneath it. I thought this is wrong, but I can't actually see from the spec that it is wrong. The spec simply says that what is underneath will "shine through". It doesn't say whether or not the background should act like a piece of glass.

I've reverted to using a fully transparent image instead of the transparent div, but I wondered whether anyone has any further info on this. (The fact that it works with a transparent image proves that it's not a z-index problem).