How to make 3 elements overlap each other with CSS

Question

I have 3 elements:

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

I want .foo to overlap .bar, .bar to overlap .foobar, .foobar to overlap .foo.

Like this:

Is it possible with CSS?

Answer 1

There is no normal solution to this problem, however you can do some tricks to make the illusion. If you create a fake-foobar inside of .bar like this markup, you can then position .fake-foobar inside .bar so that it looks like the corner of .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:

Demo with borders
Demo without borders