绝对div的z-index

Question

JS Fiddle

我有两个div，A＆amp; 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给予＆＃39; a＆＃39;将解决您的问题。的 demo

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的z-index更改为-1

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