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

Question

我正在尝试开发一种 CSS 效果，其中网页的上 Angular/左 Angular 有一个固定的彩色元素。有不同的“阶段”/背景 block (红色、绿色、蓝色)，高度为 1000 像素。在各个阶段之间的桥梁上，我希望图标的颜色能够过渡。我在 jsfiddle 上 mock 了一些东西。我真的很想看到两个固定元素的两半重叠成一个，这让我很高兴。

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(紫色) ，您将它们全部设置为工作，以便紫色框位于红色上方并位于绿色下方。在这一点上你卡住了，没有办法把另一个盒子放在紫色、红色和绿色之上。这是不可能的。