如何在層次結構中的其他DIV下獲得DIV？

我遇到了分層DIV元素的順序問題。我有一個DIV .lens-flare，它位於HTML層次結構的底部。然而，當我將transform: translate這個位置包含在整個父DIV中時，它會在層次結構中顯示上面的元素。如何在層次結構中的其他DIV下獲得DIV？

所以我嘗試設置Z索引，然後把我的translate變成translate3d。我仍然無法獲得.lens-flare下方的.top-nav-bar,.nav-bar或.cta。

目前我有一個pointer-events: none申請，所以我可以至少點擊下面的東西。但是，我怎麼能實際移動.lens-flare層下的一切成功？

這裏是我的CodePen該項目

2015-04-22 bmoneruxui

元素之後呈現被認爲是更接近屏幕比他們之前渲染的元素。

如果你想改變這個，Z-index是答案，你只需要記住z-index只適用於定位的元素。

.lens-flare 
    position: relative 
    z-index: 1 

.nav-bar, .top-nav-bar, .cta 
    position: relative 
    z-index: 2

2015-04-22 15:27:50 sEver

注意，由於OP是使用'transform'屬性，它定義一個新的堆棧層（類似於'位置：relative'）。您的修補程序可以在沒有'position：relative'的情況下工作，但添加它並不會影響解決方案。 –

非常感謝。我不知道「渲染後更接近屏幕」。雖然我猜它確實有道理。我認爲層次結構決定了圖層順序。應用並保存！ – bmoneruxui

@MarcAudet在解釋時，顯式比隱式更好，我猜：> – sEver

回答