我怎樣纔能有一個絕對定位的元素在它的兄弟姐妹與z指數？

Question

我有一個左邊欄內容的佈局。側邊欄絕對定位，寬度200px，內容左邊距200px。這一切都很華麗，但我剛開始製作導航動畫，我希望它從內容下面滑入。看小提琴。

問題是，絕對定位邊欄是以上的內容，無論的z索引設置爲1和2，分別的。

將側邊欄的z-index設置爲-1可以正確滑入，但將其放置在其父項下方，導致導航無法點擊。

fiddle

<div class="parent"> 
    <aside class="animated fadeInRight"> 
    ... navigation ... 
    </aside> 
    <main> 
    ... content ... 
    </main> 
</div> 

如何在從內容下方的側邊欄滑動，但父上面？

Answer 1

啊哈！我已經知道了。

作爲每w3schools ...

注： z索引僅適用於定位元素（位置：絕對的，位置：相對的，或位置是：固定）。

所以簡單地增加位置：相對到<main>修復它。

Updated fiddle

Answer 2

如果添加位置：相對;到你的主箱子，z-index css將被應用。您目前擁有它的方式，z-index不起作用，因爲它需要添加位置樣式。