如何使3个元素与CSS彼此重叠 [英] How to make 3 elements overlap each other with CSS

问题描述

我有3个元素：

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

我想要 .foo c $ c> .bar ， .bar 以重叠 .foobar ， .foobar 以重叠 .foo 。

p>

有可能使用CSS吗？

解决方案

解决这个问题，但是你可以做一些技巧来使错觉。
如果你在 .bar 里面创建一个 fake-foobar ，就像这个标记， code> .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> 
  

这里是一个显示你诀窍的图片：


带边框的示范

演示无边框

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?

解决方案

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

这篇关于如何使3个元素与CSS彼此重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！