背景DIV元素涵盖所有其他 - 如何解决？

Question

我需要一个具有响应式布局的页面，其中包含以下元素（参见图片）：

传奇：

1. ＆＃34;折叠＆＃34;对于菜单意味着它只是一个小按钮，点击再次展开菜单;

2. 当左侧菜单折叠时，内容和画布div需要滑动到页面的左侧。当它展开时，它们会再次向右推;

3. 默认情况下折叠底部菜单2（您只能看到一个按钮）。如果单击它，则会打开小菜单（在其他元素上方）;

4. 内容div可滚动;

5. 内容和画布中的元素都应该是可选的;

现在我有以下代码：

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

背景的位置是＆＃34; relative＆＃34;，菜单和画布设置为＆＃34;固定＆＃34;。

现在的问题是某些东西（背景div）覆盖了所有其他元素，因此我无法选择内容div和canvas div中的元素。

我尝试正确设置z-index（背景最低，画布最高） - 没有工作。

我不明白问题所在。

是的，有人可以帮助我吗？也许你可以从头开始告诉我如何在CSS中安排这些元素，以便我得到我需要的安排？

谢谢！

Answer 1

您似乎忘记为内容div设置position属性？ z-index仅适用于具有固定，绝对或相对位置的元素。 （默认为静态位置，因此z-index不起作用）

不知道为什么涵盖其他元素。也许发布css也会有所帮助。