基于z-index和分层交换固定元素

Question

我正在尝试开发一种CSS效果，其中网页的左上角有一个固定的彩色元素。有不同的“阶段”/背景块（红色，绿色，蓝色），高度为1000px。在阶段之间的每个桥梁，我希望图标的颜色过渡。我在jsfiddle上嘲笑了一些东西。我真的希望看到两个固定元素的两半重叠成一个，这会让我很开心。

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的限制。

Answer 1

Demo

单独使用CSS是不可能的，这就是原因。当您设置第一个元素.stage.one（红色），.stage.two（绿色）和.box.one（紫色）时，您将它们全部设置为正常工作，以便紫色框位于红色，下绿色。此时你卡住了，没有办法把另一个盒子放在紫色，红色和绿色之上。这是不可能的。