html - z-index とレイヤリングに基づいて固定要素を交換します

Question

Web ページの上/左隅に固定色の要素がある CSS 効果を開発しようとしています。高さ 1000px のさまざまな「ステージ」/背景 (赤、緑、青) のチャンクがあります。ステージ間の各ブリッジで、アイコンの色を切り替えたいと思います。私はjsfiddleで何かをモックアップしました。固定された 2 つの要素の半分が重なり合って 1 つになるのを文字通り見たいと思っています。

http://jsfiddle.net/reggi/vxBV3/

ここにCSSがあります

.stage{width:100%;height:1000px;position:relative;}

.stage.one{background:red;z-index:1;}
.stage.two{background:green;z-index:1;}
.stage.three{background:blue;z-index:1;}

.box{width:50px;height:50px;position:fixed;margin:10px;}

.box.one{background:purple;z-index:1;}
.box.two{background:orange;z-index:1;}
.box.three{background:yellow;z-index:1;}

そしてHTML

<!--

<div class="box one"></div>

<div class="box two"></div>

<div class="box three"></div>

-->

<div class="stage one">
    <div class="box one"></div>
</div>

<div class="stage two">
    <div class="box two"></div>
</div>

<div class="stage three">
    <div class="box three"></div>
</div>​

これをCSS のみにしたいのです。JavaScript でこれが簡単になることはわかっていますが、可能であれば CSS の限界を押し広げたいと考えています。