I am trying to figure out why a child element does not appear behind its parent element when given a lower z-index value than the parent. It only appears to work when you do **not** touch the parent's default z-index value.

Here's a basic example.

HTML:

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

```

CSS:

```
.a {
    position: relative;
    background: #eaeaea;
    height: 200px;
    width: 200px;
    z-index: 20;
}
.b {
    position: relative;
    z-index: -20;
    background: #d6d6d6;
    height: 100px;
    width: 100px;
}

```

Link to example:
<http://jsfiddle.net/V4786/2/>

Any thoughts would be appreciated.