Box-Shadow：before，：z-index堆棧問題之後

所以我一直在玩盒子陰影，我最近做了一些像這樣的東西，它的工作很完美。然後突然之間沒有明顯的原因就停止了工作！Box-Shadow：before，：z-index堆棧問題之後

我想要做的是有一個簡單的div框，雙陰影底下做出一種摺疊效果。

如果你在jfiddle http://jsfiddle.net/TJuDu/上查看，你可以看到我已經完成的所有代碼。問題在於：元素之前和之後的堆疊，它的位置正確，但堆疊錯誤，陰影在.layout div後面，當它們應該清楚地顯示在.box div後面時。如果我刪除z-index值，我可以看到位於.box div上方的陰影。

事情是我在另一個頁面上完全像這樣做，它的工作，然後突然停止工作在該頁面上，我在這個例子。

來源

2012-06-22 Christoffer Palm

第二這個問題的答案其實解釋了這個問題很好：Is it possible to set the stacking order of pseudo-elements below their parent element?

你需要做的就是用.box像這樣的包裝：

<div class="box"> 
    <div class="pseudo-box"> 
     <h3>Awesome Box Title!</h3> 
     <p class="box-text">This is a box!</p> 
    </div> 
</div>

那麼對於CSS，應用下面以.box：

position:relative; 
z-index: 2;

（或任何相關的z-index的）和你的風格的其餘部分應應用於.pseudo-box，它應該有position: relative;但沒有z-index。

最後，:before和:after應.pseudo-box相關聯，而不是.box

看到它在這裏工作：http://jsfiddle.net/cchana/TJuDu/1/

來源

2012-06-22 08:31:42 cchana

感謝您的幫助！這很奇怪，我前幾天在一個容器中使用它。這個解決方案似乎工作得很好，所以豎起大拇指:) –

我一直想瘋狂地把Nicolas Gallagher的技巧融入到這裏：http://nicolas.javaeye.com/css-drop-shadows-without-images/demo/但是沒有運氣，直到我嘗試了向我的div添加另一個包裝的方法，這是我試圖渲染的陰影，並控制其z-index。謝謝！ – Shiprack

Box-Shadow：before，：z-index堆棧問題之後

回答

相關問題