z-index 不适用于相对位置

Question

我写的css编码是以下几行。但不工作z-index。

我想知道如何使z-index 工作，同时将position 的值保持为relative。

      #foo {
        position: relative;
        z-index: -1;
        width: 100%;
        height: 30%;
        background-color: lightblue;
      }

      #bar {
        width: 50%;
        height: 30%;
        background-color: lightpink;
      }

据我所知，如果您将position 的值设置为非静态值，z-index 应该可以工作。是否还有其他因素会影响z-index？

此外，如果我将 position 的值更改为 absolute 它工作正常。

当position 是relative

当position 是absolute

Answer 1

• 一切都按您的需要运行，您可以看到我已将margin-bottom:-20px; 添加到.foo，这样您就可以确定.foo 在.bar 后面。
• 了解该位置不会使项目脱离流程，这会将其保持在其位置。要真正看到这一点，两个元素之间必须有一些重叠，而不是您可以看到z-index 的效果。

html,
body {
  width: 100%;
  height: 100%;
}

#foo {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 30%;
  background-color: lightblue;
  margin-bottom: -20px;
}

#bar {
  width: 50%;
  height: 30%;
  background-color: lightpink;
}

<div id="foo">Foo</div>
<div id="bar">Bar</div>