z-index 不適用於 position 相對

Question

我寫的 css 編碼是以下幾行。 但不工作z-index 。

我想知道如何在將position的值保持為relative的同時使z-index工作。

      #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的

演示

https://codesandbox.io/s/heuristic-bose-bfetmj?file=/index.html

Answer 1

• 一切都按照您的需要進行，您可以看到我添加了margin-bottom:-20px; 到.foo以便您可以確保.foo實際上位於.bar后面。
• 了解 position 不會將項目從流程中取出，這將使其保持在 position 中。 要真正看到這一點，兩個元素之間必須有一些重疊，而不是你可以看到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>