html - 下の要素をクリックする機能を失うことなく、ある要素を別の要素の上に表示する

Question

「一般的な」質問....

z-index を使用する 2 つの HTML 要素を上下に並べると、下の要素をクリックできなくなります。ただし、下のものはメインコンテンツです。上のものは半透明で、下のものの上に表示する必要があります。

...私の特定の問題....

リープモーションデバイスで制御できるWebアプリを開発しようとしています。

Web ページの上に SVG を使用して、ユーザーの指先をカーソルとして表示しています (リープ モーション デバイスを使用)。Web ページ上に表示するには SVG が必要ですが、もちろん、Web ページ自体をクリック可能にする必要があります。

私が求めているのは...SVGを上に表示して（ページ全体をカバーする）、その下のページを使用可能にする方法はありますか？z-index はおそらくここでの答えではないことは理解していますが、それが何であるかはわかりません。ここで同様の問題を見つけましたが、ほとんどの解決策は「ある要素を別の要素の上に表示しない」ことです。

それを行うためのより良い方法がある場合、答えとして「カーソルとして何か他のものを使用する」ことでも問題ありませんが、私の特定の問題は、下位要素を集中。

デモ用に以下のコードを簡単にいじってみましょう: http://jsfiddle.net/mmarkey/v5B9a/7/

<div class="bottom">
    <ul>
        <li><a href="google.com">A hyperlink to google</a>
        </li>
        <li><a href="amazon.com">A hyperlink to amazon</a>
        </li>
        <li><a href="yahoo.com">A hyperlink to yahoo</a>
        </li>
        <li><a href="facebook.com">A hyperlink to facebook</a>
        </li>
        <li><a href="bing.com">A hyperlink to bing</a>
        </li>
    </ul>
</div>
<svg class="top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <circle cx="10" cy="25" r="10" fill="rgba(20,130,150,0.80)" />
    <circle cx="45" cy="40" r="10" fill="rgba(20,130,150,0.80)" />
    <circle cx="70" cy="50" r="10" fill="rgba(20,130,150,0.80)" />
    <circle cx="100" cy="10" r="10" fill="rgba(20,130,150,0.80)" />
</svg>

.bottom {
    background: #CCCCFF;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}
.top {
    position: fixed;
    z-index:10;
}