[JS Fiddle](https://jsfiddle.net/h3hdjxxf/)

I have two divs, A & B:

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

```

I want div B to be behind div A. I do not wish to change the order of the markup.

I have tried z-index, with no luck.

```
.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;
}

```