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

Question

我需要一个具有响应性布局的页面，其中包含以下元素(见图)：

​

​

图例：

1. “折叠”的菜单意味着它只是一个小按钮，它再次展开菜单点击)；
2. 当左菜单折叠时，内容和画布div需要滑到页面的左侧。当它展开时，它们又被推到了右边；
3. 默认情况下，底部菜单2被折叠(您只能看到一个按钮)。如果你点击它，那么小菜单就会打开(高于其他元素)；
4. 内容div是可滚动的；
5. 内容和画布上的元素都应该是可选择的；

现在我有以下代码：

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

背景的位置是“相对的”，菜单和画布被设置为“固定”。

现在的问题是，某些内容(背景div)覆盖了所有其他元素，因此我无法选择内容div和画布div中的元素。

我尝试正确设置z索引(背景最低，画布最高)，但没有奏效。

我不明白问题出在哪里。

有人能帮帮我吗？也许你可以从头到尾告诉我如何在CSS中安排这些元素，这样我就能得到我所需要的安排？

谢谢!

Answer 1

您似乎忘记为内容div设置位置属性了？Z-索引只适用于固定、绝对或相对位置的元素。(默认值是静态位置，因此z-索引不起作用)

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