絕對 div 上的 z-index

Question

JS小提琴

我有兩個 div，A 和 B：

<div class="a">
    A
</div>
<div class="b">
    b
</div>

我希望 div B 位於 div A 之后。我不想更改標記的順序。

我試過 z-index，但沒有運氣。

.a{
  background: gold;
  height: 100px;
  border-bottom: 2px solid red;
  z-index: 99;
}
.b{
  background: blue;
  position: absolute;
  width: 100%;
  height: calc(100% - 100px);
  transform: translateY(-10px);
  z-index: 98;
}

Answer 1

給出position: relative對於“a”將解決您的問題。 演示

z-index 僅適用於position:relative 。

.a{
  background: gold;
  height: 100px;
  border-bottom: 2px solid red;
  z-index: 10;
  position:relative;
}

.b{
  background: blue;
  position: absolute;
  width: 100%;
  height: calc(100% - 100px);
  transform: translateY(-10px);
  z-index: 1;
  top: 0;
}

Answer 2

只需將 b 類的 z-index 更改為 -1

.b{
  background: blue;
  position: absolute;
  width: 100%;
  height: calc(100% - 100px);
  transform: translateY(-10px);
  z-index: -1;
}