特定の要素をマウスイベントが透過するようにしたい

要素を位置指定して他の要素の上に重ねて表示すると、背景を設定しなくてもマウスイベントは重ねた要素の方に取られてしまいます。

例えば次のコードではborderを設定したdivの上からではボタンが押せません。

div {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  border: 2px solid blue;
}

<button onclick="alert('hello!')">Click me!</button>
<div></div>

背景の部分だけ、あるいは重ねた要素全体でも、まるで要素が存在しないかのようにマウスイベントを透過させることはできないでしょうか？