为什么我的 z-index 在此代码中不起作用？

Question

我这里有一个带有边栏的网站，但我希望在用户单击菜单按钮之前隐藏边栏。不管怎样，我的 .sidebar 在 z-index: 0; 而我的 .page-content 在 z-index: 1;。为什么加载网页时侧边栏没有隐藏？除了用于测试目的的 <h1> 之外，我的 page-content 中什么都没有。

这是我的 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;
}

那么为什么我加载网页时我的侧边栏没有被隐藏？当我加载它时，我可以同时看到侧边栏和 "Test" 文本。

编辑：

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

的原因

编辑：

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

Answer 1

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

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

z-index 可用于将元素定位在后面具有不透明背景的其他元素，这可能会使它们显得隐藏（双关语意），但请放心，该元素还在那里。

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

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 在此代码中不起作用？

Why is my z-index not working in this code?

html

css

z-index

styling