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

Question

我需要一个具有响应式布局的页面，该页面具有以下元素(见图):

图例:

1. 菜单的“折叠”意味着它只是变成一个小按钮，点击时再次展开菜单)；

2. 当左侧菜单折叠时，内容和 Canvas div需要滑动到页面的左侧。当它展开时，它们又被推到右边；

3. 底部菜单2默认折叠(只能看到一个按钮)。如果单击它，则会打开小菜单(在其他元素之上)；

4. 内容div是可滚动的；

5. 内容和 Canvas 中的元素都应该是可选的；

现在我有以下代码:

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

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

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

我尝试正确设置 z-index(背景最低， Canvas 最高)——没用。

我不明白这是什么问题。

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

谢谢!

Answer 1

你好像忘记给content div设置position属性了？ z-index 仅适用于具有固定、绝对或相对位置的元素。 (默认是静态位置，所以z-index不起作用)

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