如何用CSS使3个元素相互重叠

我有3个要素：

<div class="foo"></div>
<div class="bar"></div>
<div class="foobar"></div>

I want .foo重叠.bar, .bar重叠.foobar, .foobar重叠.foo.

像这样：

用CSS可以吗？

没有normal这个问题的解决方案，但是你可以做一些技巧来制造错觉。 如果您创建一个fake-foobar代替.bar像这个标记一样，您可以定位.fake-foobar inside .bar所以它看起来像.foobar.

<div class="box foo"></div>
<div class="box bar">
    <div class="box fake-foobar"></div>
</div>
<div class="box foobar"></div>

Here is an image showing you the trick:

带边框的演示 http://jsfiddle.net/hLt5rguq/2/
无边界演示 http://jsfiddle.net/hLt5rguq/