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

Question

我有3个元素：

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

我希望.foo重叠.bar，.bar重叠.foobar，.foobar重叠.foo。

像这样：

CSS可以吗？

Answer 1

此问题没有正常的解决方案，但是你可以做一些技巧来制造错觉。 如果您在此fake-foobar内部.bar内创建.fake-foobar，则可以将.bar置于.foobar内，使其看起来像<div class="box foo"></div> <div class="box bar"> <div class="box fake-foobar"></div> </div> <div class="box foobar"></div> 的角落。< / p>

{{1}}

这是一张显示诀窍的图片：

Demo with borders
Demo without borders