如何使用 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>

这是一张图片，向您展示了这个技巧：

有边界的
演示 无边界的演示