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

Question

我正在尝试开发一种 CSS 效果，其中网页的左上角/左角有一个固定的彩色元素。有不同的“阶段”/背景块（红色、绿色、蓝色），高度为 1000 像素。在各个阶段之间的桥梁上，我希望图标的颜色能够过渡。我在 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

演示

This is impossible to do with CSS alone, here's why. When You set the first elements .stage.one (red), .stage.two(green) and .box.one(purple), your setting them all up to work so that the purple box is on top of the red and goes under the green. At this point your stuck, there's no way to put another box over purple, under red, and over green. It's impossible.