2014-10-30 78 views
4

我有3個要素:如何使3個元素互相重疊CSS

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

我想.foo重疊.bar.bar重疊.foobar.foobar重疊.foo

像這樣:

enter image description here

是否有可能使用CSS?

+0

除非你給每個元件的'具有不同'的z index'值即會fixed'位置什麼都不做,我什麼也沒做。我從哪說起呢? – Jared 2014-10-30 02:47:23

+0

您正在討論在同一圖像中變化的z索引。例如foo將在角落上有2個z-index,而在對面的角落上有2個......有趣的 – Sai 2014-10-30 02:59:25

+0

@Jared - 我試圖將需求概念化。我遇到的問題是3張圖像共享同一架飛機。如果我們正在處理透明圖像,那麼我們可以通過css 3d變換和一些css定位來避開。 – Sai 2014-10-30 03:14:40

回答

4

有沒有正常解決這個問題,但你可以做一些技巧,使幻想。 如果您在.bar裏面創建了fake-foobar這樣的標記,那麼您可以在.bar的內部定位.fake-foobar,使其看起來像.foobar的拐角處。

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

這裏是一個圖像顯示你特技: Impossible Z-index

Demo with borders
Demo without borders