背景DIV元素涵蓋所有其他 - 如何解決？

Question

我需要與具有下列元素的響應佈局的頁面（見圖片）：

注：

1. 「摺疊」的菜單意味着它只是變成一個小按鈕，點擊後再次展開菜單）;

2. 當左側菜單摺疊時，內容和canvas div需要滑動到頁面的左側。當它展開時，它們又被推到右邊;

3. 底部菜單2默認摺疊（只能看到一個按鈕）。如果點擊它，則打開小菜單（在其他元素上方）;

4. content div是可滾動的;

5. 內容和畫布中的元素都應該是可選的;

現在我有以下代碼：

<div id="background"> 
    <div id="menu></div> 
    <div id="content"></div> 
    <div id="canvas"></div> 
<div> 

背景的位置是「相對」，菜單和帆布被設置爲「固定」。

現在的問題是某些東西（背景div）覆蓋了所有其他元素，所以我無法選擇內容div和canvas div內的元素。

我試着正確設置z-index（背景最低，畫布最高） - 沒有工作。

我不明白是什麼問題。

有人可以幫我嗎？也許你可以從頭開始告訴我如何在CSS中安排這些元素，這樣我就可以得到我需要的安排了？

謝謝！

Answer 1

你似乎忘記了爲內容div設置位置屬性？ z-index僅適用於具有固定，絕對或相對位置的元素。 （默認是靜態位置，所以z-index不起作用）

不知道爲什麼其他元素被覆蓋。也許張貼CSS以及幫助。