Question

我在这里有一个带侧边栏的网站，但我希望隐藏侧边栏，直到用户点击菜单按钮。无论如何，我的.sidebar位于z-index: 0;而.page-content位于z-index: 1;。为什么加载网页时侧边栏没有隐藏？我的page-content除了<h1>以外，我没有任何内容用于测试目的。

这是我的HTML文件：

<!DOCTYPE html>
<head>
</head>

<body>

    <div class = "page-wrapper">

        <div class = "page-content">
            <h1>Test</h1>
        </div>

        <div class = "sidebar">
            <ul>
                <li>#</li>
                <li>#</li>
                <li>#</li>
                <li>#</li>
                <li>#</li>
            </ul>
        </div>

    </div>

</body>
</html>

这是我的CSS文件：

h1 {
    /* Just to centre my text */
    position: relative;
    left: 50%;
}

.page-content {
    position: relative;
    z-index: 1;
}

.sidebar {
    position: fixed;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 120px;
    padding: 30px;
    background: #333;
    z-index: 0;
}

那么为什么加载网页时我的侧边栏不会被隐藏？当我加载它时，我可以看到侧边栏和“测试”文本。

编辑：

我看到很多人都说z-index不是为了隐藏东西。我不是想隐藏边栏。当用户点击菜单按钮时，我希望页面滑过以显示侧边栏，因此我使用z-index而非display: none;的原因。

编辑：

你们有些人说这是另一个问题的重复，但是当你读到我的评论时，请意识到我提出的问题是完全不同的。我将尝试尽可能简单地解释我在这里尝试做什么。我有一个网站，用户点击菜单栏，整个网站向右移动180px，从而揭示固定在下面的侧边栏。你们提到我的.page-content需要一个背景，但就像别人说的那样，它只占用我内心的物体那么大的背景。如何或在何处设置将移动的背景，但仍然完全覆盖侧边栏？

Answer 1

首先，您的z-index IS 正在工作。

z-index不负责使元素可见或不可见。（为此，您可以使用opacity，visibility或display属性。

z-index可用于将元素置于背后的不透明背景元素，这可能会使它们显得隐藏（双关语），但请放心，元素仍然存在。

您的CSS没有不透明背景的元素，z-indicies高于0位于.sidebar之上，所以这就是您看到它的原因。

Answer 2

在.page-content中添加背景，您将看到z-index的效果。

更好的方法是将带有左侧属性的侧栏隐藏为一些负值，例如-100px，如下所示。

.sidebar {
    position: fixed;
    left: -100px;
    top: 0px;
    bottom: 0px;
    width: 120px;
    padding: 30px;
    background: #333;
    z-index: 0;
}

当用户点击左侧设置的菜单图标时：0px使用javascript。

Answer 3

您的侧边栏未被隐藏，因为.page-content没有背景。放一个背景并添加这个CSS：

  .page-content{
     background: #fff;
     height: 100%;
     width: 100%;
  }

这样，你就可以将它滑到那边了。

为什么我的z-index不能在这段代码中工作？

3 个答案: